Заполните сетку divs максимально эффективно (пространство экрана, а не CPU)

Question

Я делаю страницу для отображения отзывов для моего клиента. Некоторые из отзывов короткие, а другие - длинные. Это выглядело вроде «Блочный» ... Вот картина того, что он на самом деле выглядит следующим образом:

(Просьба игнорировать временные повторные свидетельства на данный момент)

Подумав это более немного, я понял, что это будет выглядеть намного лучше, если бы все вроде немного более эффективно заполнения пустого пространства, это то, что я приготовил в моей программе редактирования изображений:

Кто-нибудь знает, как это сделать? Я немного поработал, но не могу найти лучший поисковый термин для чего-то подобного ...

Спасибо!

EDIT

Вот что она в конечном итоге выглядит как после того, как ответы на приведенные ниже. Спасибо, парни!

Answer 1

Отъезд masonry jquery.

Answer 2

Если вы можете использовать JQuery, я бы проверить этот плагин:

http://masonry.desandro.com/

Answer 3

Отъезд jQuery Masonry плагин.

Answer 4

Если вы не против работать с jQuery, плагин называется jQuery Masonry является идеально для выполнения этой задачи. Возможно, вам придется изучить немного jQuery, чтобы заставить его работать, но это не должно занять слишком долго, если вы следуете за somewhat-extensive tutorial.

Вы не можете сделать это с помощью CSS, потому что единственный способ сделать это - float s, но они работают только по горизонтали. Этот плагин эмулирует стиль float: top через jQuery, который вы пытаетесь сделать.

Answer 5

Это именно то, что сделано для CSS3 multi-column layout.

К сожалению, не все браузеры поддерживают его, поэтому вам, возможно, придется применить некоторые умения, чтобы сделать его «не уродливым» в других браузерах. Например, вы можете просто позволить дефолту взять на себя и дать каждому показателю полную ширину - это не так уж плохо читать и, конечно, лучше, чем исходный макет.