Masonry - адаптивные блоки в виде сетки

Плагин Masonry - JQuery библиотека для создания адаптивных блоков в виде сетки на сайте в оптимальном положении, на основе имеющегося вертикального пространства. Если вкратце, то эта библиотека помогает выровнять блоки так, чтобы не было пустого места по вертикали, при этом экономя место. Скорее всего вы встречали сайты с использованием такой библиотеки JQuery. В этой статье поговорим как мы используем masonry.

Установка на сайт:

1. Подключение библиотеки.
Для этого скопируйте и вставьте данный код на страницу где будет использоваться данная библиотека (файл index или main).
Первая строка для разработчиков, вторая для пользователей

<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.0/masonry.pkgd.js"></script>
<!-- или -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.0/masonry.pkgd.min.js"></script>

2. Включение Masonry (Инициализация)
Если вы не хотите использовать дополнительное подключение через jаvascript, то используйте этот код (при данном способе нужно прописывать код на всех страницах, где будет использоваться библиотека):

<div id="container" class="js-masonry" data-masonry-options='{ "columnWidth": 200, "itemSelector": ".item" }'> 
здесь ваш блок 
</div>

Чтобы скрипт начал работать его нужно применить к нашему контейнеру. Запуск скрипта в виде экземпляра на чистом jаvascript делает так:

var container = document.querySelector('#container');
var msnry = new Masonry( container, {
  // Настройки
  columnWidth: 200,
  itemSelector: '.item'
});

Если Вы хотите добавить код непосредственно через html страницу, следует вставить код такого формата

<script type="text/javascript">
	$('#container').masonry({
  // options
  itemSelector: '.item',
  columnWidth: 200
});
</script>

3. HTML разметка.
Следует задать контейнеру класс .item ну и если есть необходимость создавать блоки разной ширины .item w2

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

4. CSS разметка.
Для блоков самого контейнера задаём ширину, например 20%. Это будет означать что наша сетка будет в 5 колонок, чтобы просчитать нужное количество колонок, учитывайте все отступы между блоками, если имеются и процентное соотношение. Высчитывайте исходя из 100% ширины.

.item { width: 25%; }
.item.w2 { width: 50%; }

5. Инициализация изображений
Для того чтобы блоки не "налазили" друг на друга следует применить imagesLoaded

Сначала мы подключаем библиотеку masonry js:
Первая строка для разработчиков, вторая для пользователей

<script src="http://imagesloaded.desandro.com/imagesloaded.pkgd.js"></script>
<!-- или -->
<script src="http://imagesloaded.desandro.com/imagesloaded.pkgd.min.js"></script>

Затем подключаем сам скрипт:

var $container = $('#container');
// Инициализация Масонри, после загрузки изображений
$container.imagesLoaded( function() {
  $container.masonry();
});