layoutItems

Метод layoutItems является одним из ключевых инструментов в библиотеке Packery для управления расположением элементов внутри контейнера. Он позволяет не только перераспределять позиции элементов, но и контролировать точность и эффективность повторной компоновки сетки после изменения DOM или размеров элементов.

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

Синтаксис

packeryInstance.layoutItems(items, isInstant);

Параметры:

  • items — массив элементов или экземпляров Packery.Item, которые необходимо перерасположить. Если передать пустой массив, метод ничего не изменит.
  • isInstant — логическое значение (true или false), определяющее, будет ли анимация перераспределения элементов проигрываться или все изменения произойдут мгновенно.

Использование layoutItems с DOM-элементами

Метод позволяет напрямую работать с HTML-элементами:

const grid = document.querySelector('.grid');
const pckry = new Packery(grid, {
  itemSelector: '.grid-item',
  gutter: 10
});

const itemsToLayout = document.querySelectorAll('.grid-item.modified');
pckry.layoutItems(itemsToLayout, true);

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

Важно: Packery автоматически обрабатывает элементы, зарегистрированные в его внутреннем массиве pckry.items. Если передать элемент, который не был инициализирован как Packery.Item, библиотека создаст временный объект для перерасчета позиции.

Работа с объектами Packery.Item

Packery хранит внутреннее представление каждого элемента в виде объекта Packery.Item. Такой объект содержит свойства, необходимые для вычисления положения: element, rect, size, position.

Можно использовать layoutItems напрямую с этими объектами:

const firstItem = pckry.items[0];
const secondItem = pckry.items[1];

pckry.layoutItems([firstItem, secondItem], false);

В этом случае элементы будут анимировано перераспределены по сетке в соответствии с текущей конфигурацией Packery.

Управление анимацией

Параметр isInstant позволяет управлять визуальной составляющей:

  • true — элементы мгновенно займут новые позиции без плавной анимации.
  • false — Packery анимирует движение элементов в новые координаты.

Использование анимации полезно при динамическом добавлении или изменении размеров элементов, чтобы пользователь видел плавный переход сетки.

pckry.layoutItems([someItem], false); // с анимацией
pckry.layoutItems([someItem], true);  // мгновенно

Сценарии применения

  1. Изменение размеров отдельных элементов Если после изменения контента или изображения размер элемента изменился, можно вызвать layoutItems только для этого элемента, что повышает производительность:

    item.style.width = '200px';
pckry.layoutItems([item]);

  2. Фильтрация элементов При скрытии или показе элементов можно перераспределять только активные элементы:

    const visibleItems = Array.from(document.querySelectorAll('.grid-item.visible'));
pckry.layoutItems(visibleItems);

  3. Динамическая вставка или удаление элементов После добавления нового элемента в DOM создается объект Packery.Item и вызывается layoutItems для перераспределения:

    grid.appendChild(newItem);
pckry.appended(newItem); // инициализация нового элемента
pckry.layoutItems([newItem]);

Важные нюансы

  • Порядок элементов в массиве items определяет последовательность перераспределения, особенно при использовании опции originLeft и originTop.
  • Синхронизация с анимацией: если элементы анимируются через CSS transition, рекомендуется использовать isInstant: false, чтобы Packery корректно вычислял координаты до и после движения.
  • Вызов без элементов: pckry.layoutItems() без аргументов не вызовет ошибку, но фактически ничего не изменит.

Резюме ключевых моментов

  • layoutItems работает с конкретными элементами, а не всей сеткой.
  • Поддерживает как DOM-элементы, так и объекты Packery.Item.
  • Позволяет управлять анимацией перемещения элементов через параметр isInstant.
  • Идеально подходит для динамических интерфейсов с изменяющимся контентом.
  • Уменьшает нагрузку на рендеринг по сравнению с полной перестройкой сетки методом layout.

Хотя layoutItems — это частный инструмент, его правильное применение позволяет создавать высокопроизводительные и отзывчивые сетки, управляя только необходимыми элементами и обеспечивая плавную визуальную динамику.

Оглавление