unstamp

Метод unstamp является важным инструментом при работе с библиотекой Packery для динамического управления расположением элементов сетки. Он позволяет “отменить закрепление” ранее зафиксированных элементов, возвращая их в поток компоновки.

Назначение метода

Метод unstamp используется для следующих целей:

  • Убирает эффект фиксированного элемента, который не участвует в автоматическом размещении других элементов.
  • Позволяет элементу снова участвовать в перестановках сетки после того, как он был временно исключён с помощью метода stamp.
  • Обеспечивает динамическую адаптацию сетки при изменении структуры DOM.

Принцип работы: Когда элемент “штампуется” (stamp), Packery исключает его из процесса расчета позиций других элементов, учитывая его размеры и положение как фиксированное ограничение. Вызов unstamp возвращает элемент в обычный поток и позволяет Packery перерассчитать сетку с учетом этого элемента.

Синтаксис

packery.unstamp( elem );

Параметры:

  • elem – DOM-элемент или массив элементов, которые нужно вернуть в поток компоновки.

Возвращаемое значение: Метод не возвращает значения; его основная функция — изменение внутреннего состояния Packery и перерасчет сетки.

Примеры использования

  1. Снятие штампа с одного элемента
var grid = document.querySelector('.grid');
var pckry = new Packery(grid, {
  itemSelector: '.grid-item',
  gutter: 10
});

var stampedItem = document.querySelector('.stamped-item');
pckry.unstamp(stampedItem);
pckry.layout(); // перерасчет сетки

В этом примере элемент с классом .stamped-item возвращается в поток сетки, и после вызова layout() Packery корректно переставляет элементы.

  1. Снятие штампа с нескольких элементов
var items = document.querySelectorAll('.stamped-item');
pckry.unstamp(items);
pckry.layout();

Массив элементов можно передать напрямую в unstamp, что особенно удобно при динамическом удалении или добавлении нескольких штампованных элементов.

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

Методы stamp и unstamp работают как противоположные операции:

  • stamp(elem) — исключает элемент из потока и фиксирует его положение.
  • unstamp(elem) — возвращает элемент в поток для нормального размещения.

Это позволяет динамически управлять элементами сетки в зависимости от логики приложения: временно закреплять элементы, а затем возвращать их в перестановку.

Особенности и рекомендации

  • После вызова unstamp обязательно выполнять layout(), иначе Packery не пересчитает позиции элементов.
  • Метод корректно работает с элементами любого размера и с элементами, расположенными в любом месте сетки.
  • Для производительности рекомендуется группировать вызовы unstamp для нескольких элементов и вызывать layout() один раз после всех изменений.
  • Не вызывает повторного закрепления элементов, которые не были заштампованы; метод игнорирует неподходящие элементы.

Применение в динамических интерфейсах

Метод unstamp особенно полезен при создании интерфейсов с динамическим содержимым:

  • При удалении временных всплывающих блоков, которые ранее были зафиксированы.
  • При возвращении скрытых или анимированных элементов в основной поток сетки.
  • При реализации фильтров или сортировок, когда определённые элементы временно исключаются из компоновки.

Взаимодействие с анимацией

Packery поддерживает плавные перестановки элементов с помощью CSS-переходов. После unstamp можно применять анимацию:

pckry.unstamp(elem);
elem.style.transition = 'transform 0.4s';
pckry.layout();

Элемент плавно интегрируется в сетку, сохраняя визуальную целостность интерфейса.

Итоговые рекомендации по использованию

  • Использовать unstamp после stamp для возврата элементов в поток.
  • Группировать вызовы при работе с несколькими элементами.
  • Всегда запускать layout() после изменения состояния штампов.
  • Комбинировать с фильтрацией и анимацией для создания интерактивных и динамичных сеток.
Оглавление