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>

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

Сайт разработчика

| jQuery, Web | Опубликовано: 22.10.2013 15:08 | 0