JQuery Masonry динамический layout, верстаем без дыр

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

Как это работает (необходимый минимум)

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

И пропишем float для блоков, без этого плагин не работает .item { float: left; }

Запускаем магию, вставив в любое место страницы следующий код:
$(document).ready(function(){ $(‘#container’).masonry({ // указываем элемент-контейнер в котором расположены блоки для динамической верстки itemSelector: ‘.item’, // указываем класс элемента являющегося блоком в нашей сетке singleMode: false, // true – если у вас все блоки одинаковой ширины isResizable: true, // перестраивает блоки при изменении размеров окна isAnimated: true, // анимируем перестроение блоков animationOptions: { queue: false, duration: 500 } // опции анимации – очередь и продолжительность анимации }); });
Готово! Теперь попробуйте изменить размер окна и вы увидите всё своими глазами.

Анимация

Если вы хотите использовать css transition вместо анимации JQuery то рекомендую использовать ещё один JQuery плагин Modernizr-transitions, с которым css transition будет работать и в браузерах не поддерживающих css3 (например Internet Explorer версии 8 и старее).

Подключаем modernizr-transitions:

И прописываем css transition для блоков, например: .item { -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; }

Теперь даже если браузер пользователя не поддерживает css transitions анимация все равно будет работать.

Полный перечень настроек плагина и документацию можно найти официальном сайте.