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

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

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


Для начала нам потребуется подключить JQuery и сам плагин:
<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-transitions, с которым css transition будет работать и в браузерах не поддерживающих css3 (например Internet Explorer версии 8 и старее).

Подключаем modernizr-transitions:
<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 анимация все равно будет работать.

Демо можно посмотреть тут, или скачать.

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

Комментарии (8)


  1. Daar
    26.02.2017 09:21

    Что-то файла с исходниками нет, хочется посмотреть.


  1. aol-nnov
    26.02.2017 10:36
    +1

    … и это во времена, когда глобальная поддержка flexbox (по информации caniuse.com) составляет 97.5%!
    но зачем??


    1. franzose
      26.02.2017 12:23

      А как на флексах сделать масонри?


      1. ggrnd0
        26.02.2017 12:53
        +1

        достаточно подключить vanilla.js


        1. franzose
          26.02.2017 14:18

          Ну, js-то понятно, вопрос был о css-only подходе)


      1. aol-nnov
        26.02.2017 13:27
        +1

        ну, так, например. код


  1. OtshelnikFm
    26.02.2017 10:59

    Для тех кто не осилил доки.
    1001-я инструкция, как работать с кирпичной кладкой.
    Ни слова про альтернативы, зато упоминание ие8 и младше. Зачем это на хабре?


  1. dshster
    26.02.2017 12:28
    +1

    Бьюсь об заклад эта статья лежала в черновиках последние лет 5, или сам автор
    И по ссылке на Демо я не вижу Masonry, кажется это джинса.