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

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

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

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

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
<script type="text/javascript" src="jquery.masonry.min.js"></script>

Теперь создадим простую структуру блоков с которой будет работать плагин:

<div id="container">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  ...
</div>

И пропишем float для блоков, без этого плагин не работает

.item {
  float: left;
}

Запускаем магию, вставив в любое место страницы следующий код:

<script type="text/javascript">
  $(document).ready(function(){ 
	$('#container').masonry({
// указываем элемент-контейнер в котором расположены блоки для динамической верстки
	  itemSelector: '.item',
// указываем класс элемента являющегося блоком в нашей сетке
          singleMode: false,
// true - если у вас все блоки одинаковой ширины
	  isResizable: true,
// перестраивает блоки при изменении размеров окна
	  isAnimated: true,
// анимируем перестроение блоков
          animationOptions: { 
	      queue: false, 
	      duration: 500 
	  }
// опции анимации - очередь и продолжительность анимации
	}); 
  });
</script>

Готово! Теперь попробуйте изменить размер окна и вы увидите всё своими глазами.

Анимация

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

Подключаем modernizr-transitions ^[6]:

<script type="text/javascript" src="modernizr-transitions.js"></script>

В опциях Masonry меняем isAnimated и удаляем animationOptions: {...}:

isAnimated: !Modernizr.csstransitions

И прописываем css transition для блоков, например:

.item {
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
}

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

Демо можно посмотреть тут ^[7], или скачать ^[8].

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

Автор: epocaliptoz

Источник ^[9]