- IT Blog. Code Inside - https://code-inside.com -

Динамический layout в стиле «карточек» Google+ с помощью JQuery Masonry

Masonry - это JQuery-плагин позволяющий быстро и просто организовать динамический layout блоков разного размера практически без потери места, а если подобрать соответствующие размеры блокам — то без пустых мест вовсе.
Под динамическим layout`ом имеется ввиду, что блоки будут располагаться в контейнере в зависимости от его размеров, максимально рационально заполняя его пространство, тем самым экономя место на странице.

Masonry Options

Для начала требуется подключить JQuery и сам плагин:



Структура блоков, с которой работает плагин, представляет собой блок контейнер и подобные блоки содержимого с одинаковым классом:

...
...
...

Чтобы плагин работал, каждый блок содержимого должен иметь свойство float left

.item {
float: left;
}

В header вставляется код, инициализирующий плагин с базовыми параметрами.


При начальной загрузке блоки располагаются "вплотную" без пропусков, а при изменении размеров окна - перестраиваются.

Сайт разработчика [1]