Как плавать элементы с разной высотой?

Я работаю над адаптивным веб-дизайном, который размещает несколько элементов в 4 столбцах рядом. Эти предметы имеют разную высоту и, следовательно, плавание не работает должным образом.

Вот что происходит в данный момент:

Любые идеи о том, как заставить элементы плавать вот так:

Я думаю, это должно работать с "кладкой" jQuery, верно? Однако я работаю с Zepto.js и думаю, что плагин jQuery не будет работать.

Есть ли для этого какой-нибудь чистый CSS (CSS3 )способ? Какой-то трюк или что-то в этом роде?

Если это не работает с чистым CSS или с JS, возможно ли это сделать:

Теперь вторая строка с элементами 5, 6 и 7 не "на самом деле" плавает, как можно было бы ожидать, но внутри есть скрытая строка -break (clearfix ).

Есть ли способ сделать это с помощью чистого CSS? Например. используйте nth-child(4n+4)и псевдоселектор -, например :after, чтобы применить разрыв строки -с content?

Любые идеи по этому поводу? Любые хитрые трюки, чтобы заставить это работать?