CSS order használata JavaScript-tel (Masonry layout)

CSS order használata JavaScript-tel (Masonry layout)
2022-10-02T23:41:37+02:00
2022-10-05T08:12:18+02:00
2022-12-07T03:41:56+01:00
helloworld2
Hali!

Van véletlen számú .box div a .container div-ben és minden .box-nak változó a tartalma. Az egyik 200px, a másik 300px magas, például.

Erről lenne szó: Edit fiddle - JSFiddle - Code Playground

<div class="container"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <div class="box">5</div> <div class="box">6</div> <div class="box">7</div> <div class="box">8</div> </div>

Ha a képernyő 1200 pixel széles vagy szélesebb, akkor 4 div-et szeretnék egy sorban:

1 2 3 4 5 6 7 8


Ha 768-1199 széles, akkor 3-at:

1 2 3 4 5 6 7 8


Ha 576-767, akkor 2-t:

1 2 3 4 5 6 7 8


Ha 576-nál kisebb, akkor 1-et:

1 2 3 4 5 6 7 8


Hogyan tudnám ezt megoldani?

Olvastam a masonry layout-ról, ami nekem kellene, de azt elvileg csak a Firefox támogatja, illetve találtam egy JS vendor-t is: Masonry

Hogyan tudnám ezt megoldani sima CSS-el és JS-el, amit én írok, tehát könyvtárak nélkül? Se ez a Desandro Masonry, se jQuery. Arra gondoltam, hogy a CSS order-ét használnám a .box elemekre. Vagy van valakinek jobb ötlete?

Elnézést, de nagyon fáradt vagyok, ha esetleg rosszul fogalmaznék. Köszönöm a segítséget előre is.
Mutasd a teljes hozzászólást!

Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd