Masonry — вывод html блоков в виде кирпичной кладки

Знакомы с социальной сетью pinterest, где блоки разных размеров выводятся в контейнер, максимально рационально заполняя пространство?

Сделать вывод таких колонок позволяет скрипт от David’a DeSandro, который называется Masonry (с англ. кирпичная кладка). Также, наглядный пример можете посмотреть на официальном сайте скрипта: masonry.desandro.com. На офф. сайте вы найдете полную документацию на английском.

Masonry — это Javascript библиотека (может работать как в паре с jQuery, так и без него), позволяющая выводить HTML блоки в компактно-сложенном виде. Скрипт анализирует высоту каждого блока и максимально экономя пространство располагает его.

Установка Masonry

Скачать

Вы можете скачать masonry, затем залить в папку со скриптами и подключить. Ну лучше использовать CDN.

• masonry.pkgd.min.js — минифицированная версия;
• masonry.pkgd.js версия без минификации.

CDN

Ссылка непосредственно на файлы Masonry в unpkg .

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<!-- или -->
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>

Менеджеры пакетов

Установить с помощью Bower:  bower install masonry --save

Установить с помощью npm:  npm install masonry-layout

Начало работы

HTML

Включите .jsфайл Masonry на свой сайт.

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

Кирпичная кладка работает с элементом сетки контейнера с группой дочерних элементов.

<div class="grid">
  <div class="grid-item">...</div>
  <div class="grid-item grid-item--width2">...</div>
  <div class="grid-item">...</div>
  ...
</div>

Класс можно указать любой, главное при вызове определить опцию itemSelector : '.grid-item'.

CSS

Все размеры элементов обрабатываются вашим CSS.

.grid-item { width: 200px; }
.grid-item--width2 { width: 400px; }

Инициализация Masonry с помощью jQuery

Вы можете использовать масонри, как плагин JQuery: .$('selector').masonry()

$('.grid').masonry({
  // options
  itemSelector: '.grid-item',
  columnWidth: 200
});

Инициализация Masonry с помощью ванильного JavaScript

Вы можете использовать Кладку с ванильным JS: . Конструктор принимает два аргумента: элемент контейнера и объект опций.new Masonry( elem, options )Masonry()

var elem = document.querySelector('.grid');
var msnry = new Masonry( elem, {
  // options
  itemSelector: '.grid-item',
  columnWidth: 200
});

// element argument can be a selector string
//   for an individual element
var msnry = new Masonry( '.grid', {
  // options
});

Инициализация Masonry прямо в HTML

Вы можете инициализировать Masonry в HTML без написания JavaScript. Добавьте data-masonryатрибут к элементу контейнера. Параметры могут быть установлены в его значении.

<div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 200 }'>

Отредактируйте эту демонстрацию на CodePen

Инициализация HTML ранее выполнялась с классом js-masonryи настройками параметров data-masonry-optionsв Masonry v3. Masonry v4 обратно совместим с этим кодом.

<div class="grid js-masonry"
  data-masonry-options='{ "itemSelector": ".grid-item", "columnWidth": 200 }'>

Параметры

Все опции необязательны, но columnWidthи itemSelectorрекомендуются использовать.

// jQuery
$('.grid').masonry({
  columnWidth: 200,
  itemSelector: '.grid-item'
});

// vanilla JS
var msnry = new Masonry( '.grid', {
  columnWidth: 200,
  itemSelector: '.grid-item'
});

<!-- in HTML -->
<div class="grid" data-masonry='{ "columnWidth": 200, "itemSelector": ".grid-item" }'>

Рекомендуемые

itemSelector

Определяет, какие дочерние элементы будут использоваться в качестве элементов элемента в макете.

Рекомендуется всегда устанавливать itemSelector. itemSelector полезно для исключения элементов изменения размера или других элементов, не являющихся частью макета.

itemSelector: '.grid-item'

<div class="grid">
  <!-- do not use banner in Masonry layout -->
  <div class="static-banner">Статический баннер</div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  ...
</div>

columnWidth

Выравнивает элементы по горизонтальной сетке.

Рекомендуется установить columnWidth. Если columnWidth не установлен, Masonry будет использовать внешнюю ширину первого элемента.

columnWidth: 80

Используйте размер элемента для адаптивных макетов с процентной шириной. Установите значение columnWidth Element или Selector String, чтобы использовать внешнюю ширину элемента в качестве размера столбца.

<div class="grid">
  <!-- .grid-sizer empty element, only used for element sizing -->
  <div class="grid-sizer"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2"></div>
  ...
</div>

/* fluid 5 columns */
.grid-sizer,
.grid-item { width: 20%; }
/* 2 columns wide */
.grid-item--width2 { width: 40%; }

// use outer width of grid-sizer for columnWidth
columnWidth: '.grid-sizer',
itemSelector: '.grid-item',
percentPosition: true

Макет

Размер элементов

Все размеры и стили элементов обрабатываются вашим собственным CSS.

<div class="grid">
  <!-- .grid-sizer empty element, only used for element sizing -->
  <div class="grid-sizer"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2"></div>
  ...
</div>

/* fluid 5 columns */
.grid-sizer,
.grid-item { width: 20%; }
/* 2 columns wide */
.grid-item--width2 { width: 40%; }

Адаптивные макеты

Для адаптивных макетов размеры элементов могут быть заданы в процентах. В masonryрежиме макета установите ширину в процентах columnWidthс размером элемента . Установите так, чтобы позиции элементов также задавались в процентах, чтобы уменьшить количество переходов между настройками при изменении размера окна.percentPosition: true

<div class="grid">
  <!-- width of .grid-sizer used for columnWidth -->
  <div class="grid-sizer"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2"></div>
  ...
</div>

/* fluid 5 columns */
.grid-sizer,
.grid-item { width: 20%; }
/* 2 columns */
.grid-item--width2 { width: 40%; }

$('.grid').masonry({
  // set itemSelector so .grid-sizer is not used in layout
  itemSelector: '.grid-item',
  // use element for option
  columnWidth: '.grid-sizer',
  percentPosition: true
})

imagesLoaded

Выгруженные изображения могут сбивать макеты Masonry и вызывать перекрытие элементов элементов. imagesLoaded решает эту проблему. imagesLoaded — это отдельный скрипт, который вы можете скачать на imagesloaded.desandro.com .

Инициализируйте Masonry, затем запускайте layoutпосле загрузки каждого изображения.

// init Masonry
var $grid = $('.grid').masonry({
  // options...
});
// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
  $grid.masonry('layout');
});

var $grid = $('.grid').imagesLoaded( function() {
  // init Masonry after all images have loaded
  $grid.masonry({
    // options...
  });
});