Динамический layout в стиле «карточек» Google+ с помощью JQuery Masonry
Masonry - это JQuery-плагин позволяющий быстро и просто организовать динамический layout блоков разного размера практически без потери места, а если подобрать соответствующие размеры блокам — то без пустых мест вовсе.
Под динамическим layout`ом имеется ввиду, что блоки будут располагаться в контейнере в зависимости от его размеров, максимально рационально заполняя его пространство, тем самым экономя место на странице.
Для начала требуется подключить JQuery и сам плагин:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript" src="http://masonry.desandro.com/masonry.pkgd.min.js"></script> |
Структура блоков, с которой работает плагин, представляет собой блок контейнер и подобные блоки содержимого с одинаковым классом:
<div id="container"> <div class="item">...</div> <div class="item">...</div> <div class="item">...</div> </div> |
Чтобы плагин работал, каждый блок содержимого должен иметь свойство float left
.item { float: left; } |
В header вставляется код, инициализирующий плагин с базовыми параметрами.
<script type="text/javascript"> $(document).ready(function(){ $('#container').masonry({ // элемент-контейнер в котором расположены блоки itemSelector: '.item', // класс элемента являющегося блоком в нашей сетке singleMode: false, // true - если все блоки одинаковой ширины isResizable: true, // перестраивает блоки при изменении размеров окна isAnimated: true, // анимация перестроения блоков animationOptions: { // опции анимации - очередь и продолжительность анимации queue: false, duration: 500 } }); }); </script> |
При начальной загрузке блоки располагаются "вплотную" без пропусков, а при изменении размеров окна - перестраиваются.