Estoy trabajando en un diseño web responsivo que hace flotar varios elementos en 4 columnas lado a lado. Esos artículos tienen diferentes alturas y, por lo tanto, la flotación no funciona correctamente.

Esto es lo que pasa en este momento:

flotando mal http://f.cl.ly/items/05233z0M0H0x1t1K331B/floating-wrong.png

Cualquier idea sobre cómo hacer que los elementos floten así:

derecho flotante http://f.cl.ly/items/300e1s0o0p1r1P3k2U3z/floating-right.png

Supongo que esto debería funcionar con jQuery "mampostería", ¿verdad? Sin embargo, estoy trabajando con Zepto.js y creo que un complemento de jQuery no funcionaría.

¿Hay alguna forma pura de CSS (CSS3) para eso? ¿Algún truco o algo así?

Si esto no funcionara con CSS puro o con JS es posible hacer esto:

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

Ahora, la segunda fila con los elementos 5, 6 y 7 no está "realmente" flotando de la forma que se esperaría, pero hay un salto de línea oculto (clearfix) dentro.

¿Hay alguna manera de hacerlo con CSS puro? P.ej. utilizarnth-child(4n+4) y un pseudo-selector como:after aplicar un salto de línea concontent?

¿Alguna idea sobre eso? ¿Algún truco inteligente para hacer que funcione?