stamp

Stamp — это один из ключевых инструментов библиотеки Packery, позволяющий фиксировать определённые элементы сетки, чтобы они не участвовали в динамическом расположении других элементов. Stamp используется, когда требуется создать «неподвижные» объекты внутри сетки, вокруг которых будут выстраиваться остальные элементы.

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

Когда элемент помечен как stamp, Packery рассматривает его как объект с фиксированными размерами и положением. Другие элементы сетки обходят его и выстраиваются вокруг него, учитывая его границы. При этом сам элемент не перемещается, и любые изменения сетки не затрагивают его позицию.

Важно: Stamp работает только с элементами, которые уже присутствуют в DOM в момент инициализации Packery, либо добавляются через метод stamp() после инициализации.

Использование метода stamp()

Packery предоставляет специальный метод для работы с фиксированными элементами:

// Инициализация Packery
var grid = document.querySelector('.grid');
var pckry = new Packery(grid, {
  itemSelector: '.grid-item',
  gutter: 10
});

// Пометка элементов как stamp
var stamps = grid.querySelectorAll('.stamp');
pckry.stamp(stamps);

В этом примере элементы с классом .stamp становятся неподвижными. Остальные элементы сетки будут располагаться вокруг них с учётом заданного gutter.

Удаление элементов из Stamp

Если элемент перестал быть фиксированным, его можно «разштамповать» с помощью метода unstamp():

var stampElement = grid.querySelector('.stamp');
pckry.unstamp(stampElement);

// После этого элемент снова участвует в позиционировании сетки как обычный item
pckry.layout();

Метод unstamp() снимает статус фиксированного элемента, и Packery пересчитывает расположение всех элементов сетки.

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

Stamp можно добавлять и после инициализации сетки. Это полезно, когда элементы создаются динамически:

var newStamp = document.createElement('div');
newStamp.className = 'grid-item stamp';
grid.appendChild(newStamp);

// Добавление в Packery
pckry.stamp(newStamp);
pckry.layout();

После добавления элемент сразу фиксируется, и Packery перерасставляет все остальные элементы вокруг него.

Взаимодействие с layout и reloadItems

  • layout: Перестраивает сетку с учётом текущих stamp-элементов. Любые изменения размеров или добавление новых элементов потребуют вызова layout() для корректного позиционирования.
  • reloadItems: Обновляет внутренний массив элементов Packery. Если новые элементы добавлены в DOM, их нужно зарегистрировать через append или reloadItems(), чтобы Packery учёл их при расположении.
pckry.reloadItems();
pckry.layout();

Ограничения и особенности

  1. Stamp не может быть одновременно draggable через Draggabilly без дополнительной настройки. Если требуется перемещать stamp, нужно учитывать пересчёт сетки вручную.
  2. Элемент с display: none при инициализации Packery не будет учтён как stamp. Его нужно делать видимым до вызова stamp().
  3. Stamp учитывает padding и margin в своих размерах при расчёте свободного пространства для остальных элементов.
  4. Stamp можно использовать для создания макета с фиксированными заголовками, баннерами или декоративными блоками, вокруг которых строится динамическая сетка.

Примеры практического применения

  • Фиксированные рекламные блоки на странице.
  • Заголовки или навигационные панели внутри сетки.
  • Элементы с особым дизайном, которые не должны смещаться при изменении количества других элементов.
// Пример с разными размерами stamp
var largeStamp = grid.querySelector('.large-stamp');
var smallStamp = grid.querySelector('.small-stamp');

pckry.stamp([largeStamp, smallStamp]);
pckry.layout();

В этом примере два элемента разного размера фиксируются, а все остальные элементы сетки выстраиваются вокруг них, соблюдая свободное пространство и отступы.

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

Оглавление