Estou trabalhando em um webdesign responsivo que flutua vários itens em 4 colunas lado a lado. Esses itens têm alturas diferentes e, portanto, flutuantes não funcionam corretamente.

Isso é o que acontece no momento:

flutuando errado http://f.cl.ly/items/05233z0M0H0x1t1K331B/floating-wrong.png

Alguma idéia de como fazer os elementos flutuarem assim:

flutuante à direita http://f.cl.ly/items/300e1s0o0p1r1P3k2U3z/floating-right.png

Eu acho que isso deve funcionar com jQuery "alvenaria", certo? No entanto, estou trabalhando com o Zepto.js e acho que um plugin jQuery não funcionaria.

Existe algum caminho CSS (CSS3) puro para isso? Algum truque ou algo assim?

Se isso não funcionasse com CSS puro ou com JS, é possível fazer isso:

flutuando diferente http://f.cl.ly/items/0p3O1k0d332c242c0G0F/floating-different.png

Agora, a segunda linha com os elementos 5, 6 e 7 não está "realmente" flutuando do jeito que você esperaria, mas há uma quebra de linha oculta (clearfix) no interior.

Existe alguma maneira para isso com CSS puro? Por exemplo. usarnth-child(4n+4) e um pseudo-seletor como:after para aplicar uma quebra de linha comcontent?

Alguma idéia sobre isso? Qualquer truque inteligente para fazer isso funcionar?