Инициализация через data-атрибуты

Библиотека Masonry предоставляет мощный инструмент для создания динамических сеток, автоматически выравнивающих элементы по вертикали, учитывая их высоту. Один из удобных способов инициализации сетки — использование data-атрибутов в HTML, что позволяет минимизировать вмешательство в JavaScript и управлять конфигурацией прямо в разметке.

Использование `data-masonry` для автоматической инициализации

Для автоматического подключения Masonry достаточно добавить к контейнеру сетки атрибут data-masonry с JSON-конфигурацией. Например:

<div class="grid" data-masonry='{"itemSelector": ".grid-item", "columnWidth": 200, "gutter": 10}'>
  <div class="grid-item">Элемент 1</div>
  <div class="grid-item">Элемент 2</div>
  <div class="grid-item">Элемент 3</div>
</div>

Ключевые моменты:

itemSelector — CSS-селектор для элементов сетки, обязательный параметр.
columnWidth — ширина колонок в пикселях или селектор элемента, который задаёт ширину.
gutter — промежуток между колонками.

Masonry автоматически считывает данные из атрибута и инициализирует сетку после загрузки страницы. Нет необходимости писать отдельный JavaScript-код для базовой конфигурации.

Поддержка дополнительных опций через data-атрибуты

Помимо базовых параметров, Masonry поддерживает следующие опции:

percentPosition — использование процентов для ширины колонок, особенно полезно для адаптивных сеток.
originLeft / originTop — определяет направление размещения элементов (слева направо, сверху вниз).
fitWidth — подгонка сетки под ширину контейнера.

Пример с дополнительными параметрами:

<div class="grid" 
     data-masonry='{
       "itemSelector": ".grid-item",
       "columnWidth": ".grid-sizer",
       "gutter": 20,
       "percentPosition": true,
       "fitWidth": true
     }'>
  <div class="grid-sizer"></div>
  <div class="grid-item">Элемент A</div>
  <div class="grid-item">Элемент B</div>
</div>

Особенность: элемент с классом .grid-sizer используется для задания базовой ширины колонок при использовании процентов.

Динамическое добавление элементов через data-инициализацию

Если сетка создаётся динамически, Masonry может быть проинициализирован после добавления элементов через событие DOMContentLoaded или с помощью MutationObserver. Пример:

document.addEventListener('DOMContentLoaded', () => {
  const grids = document.querySelectorAll('[data-masonry]');
  grids.forEach(grid => {
    const options = JSON.parse(grid.getAttribute('data-masonry'));
    new Masonry(grid, options);
  });
});

Преимущества подхода:

Удобно для CMS и динамических страниц, где структура генерируется сервером.
Позволяет легко менять параметры сетки без редактирования JavaScript-кода.

Комбинация с Lazy Loading и изображениями

При работе с изображениями часто требуется дождаться их загрузки, чтобы Masonry корректно расставил элементы. В сочетании с data-masonry используется библиотека imagesLoaded:

const grid = document.querySelector('.grid');
imagesLoaded(grid, () => {
  new Masonry(grid, JSON.parse(grid.getAttribute('data-masonry')));
});

Ключевой момент: Masonry автоматически перестраивает сетку после загрузки изображений, предотвращая наложение элементов и пустые промежутки.

Встроенное управление через HTML без JS

Использование data-атрибутов минимизирует необходимость писать скрипты и позволяет:

Изменять параметры Masonry прямо в HTML.
Легко поддерживать адаптивность сетки через CSS.
Обеспечить совместимость с различными фреймворками и генераторами страниц.