Инициализация через JavaScript

Для работы с Masonry необходимо подключить библиотеку через <script> тег или с помощью пакетного менеджера (npm/yarn). После подключения создается экземпляр Masonry, который привязывается к контейнеру элементов. Основная структура кода выглядит следующим образом:

var elem = document.querySelector('.grid');
var msnry = new Masonry(elem, {
  // Опции
});

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

Основные опции и их значение

При инициализации можно передавать объект опций, который управляет поведением сетки:

  • itemSelector – CSS-селектор для элементов сетки, например .grid-item. Без этой опции Masonry не сможет корректно определять дочерние блоки.
  • columnWidth – ширина колонок. Может быть числом в пикселях или CSS-селектором элемента, который используется в качестве эталона.
  • gutter – промежуток между элементами сетки. Поддерживает пиксели или проценты.
  • percentPosition – если значение true, Masonry будет использовать процентные позиции вместо фиксированных пикселей. Полезно для адаптивных сеток.
  • fitWidth – если true, Masonry выравнивает контейнер по центру, подгоняя ширину под содержимое.
  • originLeft / originTop – управляют ориентацией сетки: слева направо и сверху вниз по умолчанию.

Пример с настройками:

var msnry = new Masonry('.grid', {
  itemSelector: '.grid-item',
  columnWidth: 200,
  gutter: 10,
  fitWidth: true,
  percentPosition: true
});

Инициализация после загрузки изображений

Часто элементы сетки содержат изображения, размеры которых неизвестны до загрузки. Для корректного размещения элементов необходимо дождаться загрузки всех изображений. Для этого используется библиотека imagesLoaded:

imagesLoaded('.grid', function() {
  var msnry = new Masonry('.grid', {
    itemSelector: '.grid-item',
    columnWidth: '.grid-sizer',
    percentPosition: true
  });
});

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

Динамическое добавление элементов

Для добавления новых элементов после инициализации используется метод appended:

var newItems = document.createElement('div');
newItems.className = 'grid-item';
document.querySelector('.grid').appendChild(newItems);
msnry.appended(newItems);

Если добавляется несколько элементов:

var newElems = document.querySelectorAll('.new-grid-item');
document.querySelector('.grid').append(...newElems);
msnry.appended(newElems);

Для обновления расположения после изменений размеров элементов используется метод layout:

msnry.layout();

Ререндеринг сетки при изменении размеров контейнера

Если контейнер или его элементы изменяют размеры динамически, необходимо уведомлять Masonry:

window.addEventListener('resize', function() {
  msnry.layout();
});

Можно оптимизировать вызовы layout через debounce, чтобы избежать частых пересчетов при изменении размеров окна.

Использование кастомного columnWidth через элемент-сизер

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

<div class="grid">
  <div class="grid-sizer"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>
var msnry = new Masonry('.grid', {
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  percentPosition: true
});

Преимущество: сетка автоматически подстраивается под ширину контейнера, не требуя фиксированных значений колонок в пикселях.

Методы управления Masonry после инициализации

  • msnry.destroy() – уничтожает экземпляр, возвращая элементы в исходное состояние.
  • msnry.reloadItems() – перечитывает все элементы контейнера для последующего перерасчета.
  • msnry.remove(elements) – удаляет элементы из сетки с последующим обновлением расположения.
  • msnry.layout() – перерасчет позиций без изменений DOM.
  • msnry.appended(elements) / msnry.prepended(elements) – добавление новых элементов в конец или начало сетки.

Обработка событий Masonry

Masonry поддерживает события через on:

msnry.on('layoutComplete', function(items) {
  console.log('Сетка обновлена', items.length, 'элементов');
});

msnry.on('removeComplete', function(items) {
  console.log('Элементы удалены', items.length);
});

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

Интеграция с анимациями

Для плавного появления элементов рекомендуется использовать CSS-переходы:

.grid-item {
  transition: transform 0.4s, opacity 0.4s;
}

При использовании методов appended или layout Masonry будет корректно анимировать перемещения элементов по новой сетке.

Эта инициализация через JavaScript обеспечивает полный контроль над Masonry: от базовой настройки до динамических изменений и анимаций. Такой подход позволяет создавать адаптивные, устойчивые к изменениям содержимого «кирпичные» сетки с точной настройкой поведения каждого элемента.

Оглавление