Событие layoutComplete

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

Основные свойства события

Событие layoutComplete вызывается автоматически после завершения layout-а. Оно передаёт два параметра:

  1. items — массив объектов Isotope.Item, представляющих элементы контейнера, которые были затронуты последней перестановкой. Каждый объект содержит свойства:

    • element — HTML-элемент, соответствующий элементу сетки.
    • isHidden — логическое значение, указывающее, скрыт ли элемент после фильтрации.
    • position — объект с координатами { x, y }, показывающими новое положение элемента.

  2. instance — сам объект Isotope, позволяющий обращаться к методам библиотеки после завершения layout.

Пример структуры параметра items:

[
  {
    element: div.grid-item,
    isHidden: false,
    position: { x: 0, y: 0 }
  },
  {
    element: div.grid-item,
    isHidden: true,
    position: { x: 0, y: 200 }
  }
]

Подключение обработчика события

Для привязки события используется метод .on() библиотеки jQuery или собственный метод events Isotope:

// Использование jQuery
$('.grid').isotope({
  itemSelector: '.grid-item',
  layoutMode: 'masonry'
}).on('layoutComplete', function(event, laidOutItems) {
  console.log('Layout завершён для элементов:', laidOutItems);
});

Для чистого JavaScript с использованием событийного API Isotope:

var iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'masonry'
});

iso.on('layoutComplete', function(items) {
  console.log('Layout завершён:', items);
});

Важно: параметр event присутствует только при использовании через jQuery. В чистом JS доступен только массив элементов.

Практическое использование

Событие layoutComplete активно применяется в следующих сценариях:

  1. Синхронизация анимаций После перестановки элементов можно запускать дополнительные анимации, например, плавное появление текста, изменение стилей или активацию CSS-анимаций:
iso.on('layoutComplete', function(items) {
  items.forEach(function(item) {
    item.element.classList.add('fade-in');
  });
});
  1. Динамическая подгрузка контента Можно проверять координаты последнего элемента и при необходимости подгружать новые элементы в сетку:
iso.on('layoutComplete', function(items) {
  var lastItem = items[items.length - 1];
  if (lastItem.position.y > 500) {
    loadMoreItems();
  }
});
  1. Отслеживание фильтрации и сортировки Позволяет получать актуальное состояние элементов после применения фильтров и сортировки, что особенно полезно для статистики или UI-индикаторов:
iso.on('layoutComplete', function(items) {
  var visibleCount = items.filter(item => !item.isHidden).length;
  document.querySelector('.counter').textContent = visibleCount;
});

Связь с другими событиями

Событие layoutComplete тесно связано с другими событиями Isotope:

  • arrangeComplete — вызывается после завершения перестановки элементов с фильтрацией или сортировкой, часто используется вместе с layoutComplete.
  • removeComplete — активируется после удаления элементов из контейнера, что также может повлиять на layout.
  • fitComplete — специфично для layout-модов с выравниванием, например, fitRows.

Различие между layoutComplete и arrangeComplete заключается в том, что layoutComplete фиксирует только завершение перестановки элементов внутри layout-а, а arrangeComplete учитывает фильтры, сортировку и видимость элементов.

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

  • Не рекомендуется выполнять тяжёлые вычисления внутри обработчика layoutComplete, так как событие срабатывает после каждой перестановки элементов и может существенно замедлить интерфейс при большом количестве элементов.
  • Для сложных UI можно комбинировать с requestAnimationFrame для плавного обновления интерфейса.
  • Для работы с динамическими сетками с изменяемыми размерами элементов стоит использовать imagesLoaded перед инициализацией Isotope, чтобы избежать неверного расчёта позиций:
imagesLoaded('.grid', function() {
  iso.layout();
});

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

  1. Masonry
var iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'masonry'
});

iso.on('layoutComplete', function(items) {
  console.log('Masonry layout завершён:', items.length, 'элементов');
});
  1. FitRows
var iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'fitRows'
});

iso.on('layoutComplete', function(items) {
  items.forEach(item => item.element.style.border = '1px solid #000');
});
  1. Vertical Layout с фильтрацией
iso.arrange({ filter: '.active' });
iso.on('layoutComplete', function(items) {
  console.log('Фильтр активных элементов завершён');
});

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

Оглавление