Передача данных в обработчики

Библиотека Masonry обеспечивает динамическое расположение элементов сетки, создавая эффект “кирпичной кладки”. Для полноценного использования возможностей Masonry необходимо уметь передавать данные в обработчики событий, таких как layoutComplete, removeComplete и imagesLoaded. Правильная передача данных позволяет получать контекст выполнения и управлять поведением элементов сетки.

События Masonry и их обработчики

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

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

Обработчик события принимает объект с массивом элементов и количество элементов, прошедших через событие:

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

msnry.on('layoutComplete', function(items, laidOutItemsCount) {
  console.log('Элементы:', items);
  console.log('Количество размещённых элементов:', laidOutItemsCount);
});

В примере выше items — это массив DOM-элементов, которые были перераспределены, а laidOutItemsCount — число этих элементов. Доступ к ним позволяет выполнять дополнительные манипуляции, например, применять анимацию или фильтрацию.

Передача дополнительных данных через функции

В некоторых случаях требуется передавать в обработчик свои собственные данные, например, идентификаторы элементов или пользовательские метки. Для этого используется замыкание:

const userData = { type: 'photo', userId: 123 };

msnry.on('layoutComplete', function(items) {
  console.log('Обработка элементов типа:', userData.type);
  items.forEach(item => {
    item.dataset.userId = userData.userId;
  });
});

Замыкание обеспечивает доступ к внешним переменным внутри обработчика. Таким образом, данные могут быть переданы без изменения исходного API Masonry.

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

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

const event = new CustomEvent('customMasonryEvent', {
  detail: {
    customData: 'тестовое значение',
    timestamp: Date.now()
  }
});

document.querySelector('.grid').dispatchEvent(event);

document.querySelector('.grid').addEventListener('customMasonryEvent', function(e) {
  console.log('Получены данные:', e.detail.customData);
});

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

Контекст `this` в обработчиках

При использовании методов экземпляра Masonry важно помнить, что контекст this внутри обработчика указывает на сам объект Masonry. Это позволяет напрямую получать доступ к свойствам и методам сетки:

msnry.on('removeComplete', function(removedItems) {
  console.log('Удалённые элементы:', removedItems);
  console.log('Общее количество элементов после удаления:', this.items.length);
});

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

Интеграция с асинхронными данными

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

fetch('/api/photos')
  .then(response => response.json())
  .then(data => {
    const grid = document.querySelector('.grid');
    data.forEach(photo => {
      const item = document.createElement('div');
      item.className = 'grid-item';
      item.innerHTML = `<img src="${photo.url}" alt="${photo.title}">`;
      grid.appendChild(item);
    });
    msnry.appended(grid.querySelectorAll('.grid-item'));
  });

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

Асинхронная загрузка изображений требует согласования событий imagesLoaded и layoutComplete, чтобы избежать ошибок при расчёте высоты и ширины элементов.