layoutComplete

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

Основная концепция

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

Событие генерируется автоматически каждый раз после завершения метода layout() или других операций, влияющих на расположение элементов. Оно полезно при динамических изменениях сетки, таких как:

  • добавление новых элементов (appended)
  • удаление элементов (remove)
  • изменение размеров элементов
  • перетаскивание элементов через Draggabilly или другие библиотеки

Синтаксис и использование

Подписка на событие выполняется с помощью метода on экземпляра Packery:

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

pckry.on('layoutComplete', function(laidOutItems) {
  console.log('Сетка завершила компоновку', laidOutItems);
});

Параметры функции обратного вызова:

  • laidOutItems — массив элементов, которые были перерасположены при последнем вызове layout(). Каждый элемент представляет собой DOM-узел или объект Packery с дополнительными свойствами (например, x, y позиции).

Практические сценарии применения

  1. Анимация элементов после компоновки
pckry.on('layoutComplete', function(laidOutItems) {
  laidOutItems.forEach(function(item) {
    item.classList.add('fade-in');
  });
});
  1. Синхронизация с внешними библиотеками

Например, при использовании библиотеки изображений для lazy-loading:

imagesLoaded(grid, function() {
  pckry.layout();
});

pckry.on('layoutComplete', function(laidOutItems) {
  console.log('Все изображения и элементы расположены');
});
  1. Обновление пользовательского интерфейса

Можно изменять показатели состояния, подсчитывать видимые элементы или запускать статистику после каждого layoutComplete.

pckry.on('layoutComplete', function(laidOutItems) {
  document.querySelector('#counter').textContent = laidOutItems.length;
});

Отличие от события arrangeComplete

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

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

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

Если сетка регулярно обновляется (добавление/удаление элементов), важно пересоздавать layout или корректно вызывать методы appended и remove для Packery:

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

pckry.appended(newItem);

pckry.on('layoutComplete', function(laidOutItems) {
  console.log('Новые элементы успешно расположены');
});

Событие layoutComplete автоматически срабатывает после этих операций, предоставляя актуальную информацию о состоянии сетки.

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

  • Событие срабатывает после всех анимаций и переходов, если используется transitionDuration.
  • Перед подпиской на событие стоит убедиться, что Packery полностью инициализирован.
  • laidOutItems возвращает именно те элементы, которые были перерасположены в последнем layout, что позволяет избежать лишней обработки всех элементов сетки.

Совместное использование с другими событиями

Для комплексного управления сеткой часто применяют несколько событий Packery одновременно:

  • dragItemPositioned — элемент перемещен пользователем
  • layoutComplete — все элементы перерасположены
  • removeComplete — удаление элементов завершено
  • appended — новые элементы добавлены и расположены

Такой подход обеспечивает полный контроль над состоянием сетки на всех этапах работы.

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

Оглавление