Это можно сделать с помощью CSS с помощью функции, называемой гибкой блочной моделью. Это расширение блочной модели, которая использовалась в CSS с самого начала, и позволяет вам делать такие вещи, как вертикальное наложение и т. Д., Что было невозможно раньше.
Вы должны начать с display: flexbox;, а затем использовать другие связанные стили для определения характеристик макета, который вы хотите. Это очень мощно. Вы можете прочитать полную спецификацию W3C для этого здесь: http://www.w3.org/TR/css3-flexbox/
Теперь плохие новости: это очень недавнее дополнение к CSS. На самом деле он имеет достаточно хорошую поддержку браузера (хотя и с префиксами поставщиков), но проблема, с которой вы всегда будете сталкиваться, заключается в том, что он не поддерживается в IE, даже в IE9 (хотя это планируется для IE10)
Для других браузеров требуются префиксы поставщиков, поэтому даже для поддерживаемых браузеров вам придется писать свои стили в четырех или пяти версиях.
Кроме того - и это настоящий убийца - не существует хорошего альтернативного решения для браузеров, которые его не поддерживают. Если вы создадите свою страницу с использованием flexbox макетов и загрузите ее в браузер, который их не поддерживает, это будет катастрофа.
По этой причине он пока еще не видел особого применения в реальном мире. Придет время, но пока IE9 и более ранние версии используются, он не станет мейнстримом.
Вы можете увидеть полную таблицу совместимости браузера для этой функции здесь: http://caniuse.com/#search=Flexible%20Box%20Layout%20Module
Тем временем вам придется использовать решение Javascript.
Моя рекомендация - плагин JQuery Masonry . Я думаю, что это будет вашим лучшим решением на данный момент.