Практические сценарии использования событий

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

  • layoutComplete – срабатывает после завершения компоновки всех элементов сетки.
  • removeComplete – срабатывает после удаления элемента из сетки.
  • append – срабатывает при добавлении новых элементов в сетку.
  • imagesLoaded – отслеживает завершение загрузки изображений в сетке (требует интеграции с библиотекой imagesLoaded).

Каждое событие возвращает объект Masonry и массив элементов, затронутых событием, что позволяет использовать эти данные для последующих операций.

var msnry = new Masonry('.grid', {
  itemSelector: '.grid-item',
  columnWidth: 200,
  gutter: 10
});

msnry.on('layoutComplete', function(items) {
  console.log('Сетка обновлена. Элементов:', items.length);
});

Обработка событий добавления элементов

При динамическом добавлении элементов в сетку важно не только вставить их в DOM, но и корректно инициализировать Masonry для новых элементов. Используется метод append вместе с событием appended.

var newItem = document.createElement('div');
newItem.className = 'grid-item';
newItem.textContent = 'Новый элемент';
document.querySelector('.grid').appendChild(newItem);

msnry.appended(newItem);
msnry.on('layoutComplete', function(laidOutItems) {
  console.log('Добавлены новые элементы:', laidOutItems.length);
});

Важный момент: метод appended не только добавляет элемент в сетку Masonry, но и инициирует пересчет компоновки, что предотвращает наложение элементов.

Реакция на удаление элементов

Удаление элементов из Masonry требует использования метода remove, после которого желательно вызвать layout для обновления сетки. Событие removeComplete позволяет выполнять дополнительные действия, например, анимацию удаления.

var itemToRemove = document.querySelector('.grid-item');
msnry.remove(itemToRemove);
msnry.layout();

msnry.on('removeComplete', function(removedItems) {
  console.log('Элементы удалены:', removedItems.length);
});

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

Управление событиями загрузки изображений

Частая задача в сетках Masonry — работа с изображениями различного размера. Для корректного позиционирования элементов необходимо дождаться полной загрузки изображений. Для этого интегрируют библиотеку imagesLoaded.

imagesLoaded('.grid', function() {
  msnry.layout();
});

Также можно подписаться на событие для каждой отдельной картинки:

imagesLoaded('.grid img').on('progress', function(instance, image) {
  console.log('Изображение загружено:', image.img.src);
});

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

Использование пользовательских событий

Помимо встроенных событий, Masonry позволяет комбинировать их с пользовательскими событиями через стандартные механизмы DOM. Например, можно создавать событие клика по элементу и реагировать на него обновлением сетки:

document.querySelector('.grid').addEventListener('click', function(event) {
  if(event.target.classList.contains('grid-item')) {
    event.target.style.backgroundColor = 'lightblue';
    msnry.layout();
  }
});

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

Оптимизация производительности при событиях

При частых обновлениях сетки (например, при infinite scroll или live-редактировании контента) важно минимизировать количество вызовов layout. Для этого применяются следующие методы:

  • Дебаунсинг событий – объединение нескольких срабатываний события в один вызов.
  • Использование методов appended и remove вместо полного пересчета всей сетки.
  • Отслеживание только видимых изменений – применять события только к новым или удаляемым элементам, а не ко всей сетке.
var debounceLayout = _.debounce(function() {
  msnry.layout();
}, 100);

window.addEventListener('resize', debounceLayout);

Применение этих техник обеспечивает плавную работу интерфейса даже при большом количестве элементов в сетке.

Комбинирование событий для сложных сценариев

События Masonry можно комбинировать для создания сложных интерактивных сценариев:

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

Каждое событие предоставляет контекстные данные (items или removedItems), что позволяет строить цепочки действий и синхронизировать Masonry с другими библиотеками, например, для анимаций или фильтрации элементов.

Такой подход превращает Masonry из простой библиотеки для расположения блоков в мощный инструмент для создания интерактивных и динамических интерфейсов.

Оглавление