Pracuję nad responsywnym projektem, który przenosi wiele elementów w 4 kolumnach obok siebie. Te przedmioty mają różne wysokości i dlatego ich unoszenie się nie działa prawidłowo.

Oto, co dzieje się w tej chwili:

pływające źle http://f.cl.ly/items/05233z0M0H0x1t1K331B/floating-wrong.png

Wszelkie pomysły na to, jak sprawić, by elementy pływały w ten sposób:

pływające w prawo http://f.cl.ly/items/300e1s0o0p1r1P3k2U3z/floating-right.png

Myślę, że powinno to działać z „masonerią” jQuery, prawda? Jednak pracuję z Zepto.js i myślę, że wtyczka jQuery nie będzie działać.

Czy jest jakiś czysty sposób na CSS (CSS3)? Jakaś sztuczka?

Jeśli to nie zadziała z czystym CSS lub JS, czy to możliwe:

pływające różne http://f.cl.ly/items/0p3O1k0d332c242c0G0F/floating-different.png

Teraz drugi wiersz z elementami 5, 6 i 7 nie „naprawdę” unosi się tak, jak byś tego oczekiwał, ale wewnątrz jest ukryty podział linii (clearfix).

Czy jest coś takiego z czystym CSS? Na przykład. posługiwać sięnth-child(4n+4) i pseudo-selektor:after zastosować przełamanie liniicontent?

Jakieś pomysły na ten temat? Jakieś sprytne sztuczki, aby to zrobić?