stamp

В библиотеке Masonry stamp используется для того, чтобы закрепить один или несколько элементов сетки на фиксированном месте, не влияя на расположение остальных элементов. Этот инструмент особенно полезен, когда нужно создать статические блоки (например, баннеры, заголовки или рекламные карточки) внутри динамически изменяющейся сетки.

Основные принципы работы stamp

1. Фиксация элемента Элемент, помеченный как stamp, исключается из расчёта Masonry при распределении остальных элементов. Это означает, что сетка «обтекает» закреплённый элемент, автоматически подстраивая расположение соседних блоков.

2. Синтаксис вызова Метод stamp вызывается на экземпляре Masonry и принимает селектор или DOM-элемент:

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

var banner = document.querySelector('.banner');
grid.stamp(banner);
grid.layout(); // Перерасчет сетки после добавления stamp

• grid.stamp(element) — добавляет элемент в список «закреплённых».
• grid.unstamp(element) — удаляет элемент из списка «закреплённых», после чего Masonry снова будет учитывать его при размещении других блоков.

Влияние на размещение элементов

Когда элемент закреплён через stamp, Masonry рассчитывает расположение остальных блоков, обходя область, занимаемую закреплённым элементом. Это позволяет создавать сложные макеты, где определённые элементы остаются на своих местах независимо от динамического добавления или удаления других элементов.

Пример:

  
1
  
2
  
Баннер
  
3

В этом примере баннер остаётся на своём месте, а элементы 1, 2 и 3 автоматически выстраиваются вокруг него, не перекрывая его.

Работа с несколькими stamp-элементами

Masonry позволяет одновременно закреплять несколько элементов. Для этого достаточно передать массив элементов или выбрать их через общий селектор:

var stamps = document.querySelectorAll('.stamp-item');
stamps.forEach(function(el) {
  grid.stamp(el);
});
grid.layout();

Элементы .stamp-item будут считаться фиксированными, а остальная сетка распределится с учётом их размеров и положения.

Изменение размеров stamp-элемента

Если размеры закреплённого элемента изменяются динамически (например, с помощью анимации или при подгрузке контента), необходимо вызвать layout после изменения размеров, чтобы Masonry пересчитал расположение остальных элементов:

banner.style.height = '300px';
grid.layout();

Без вызова layout сетка не обновится, и соседние блоки могут налезать на изменившийся stamp.

Важные моменты

• Stamp-элемент не должен быть частью itemSelector, иначе Masonry будет пытаться разместить его вместе с другими блоками.
• Можно комбинировать несколько stamp-элементов с динамическими и статическими элементами, создавая сложные макеты.
• Методы stamp и unstamp не изменяют DOM, они только управляют внутренним поведением Masonry при расположении элементов.

Сравнение stamp и itemSelector

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