Публикация расширений

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

Базовый синтаксис подключения выглядит следующим образом:

var grid = document.querySelector('.grid');
var msnry = new Masonry(grid, {
  itemSelector: '.grid-item',
  columnWidth: 200,
  gutter: 10,
  fitWidth: true
});
  • itemSelector — CSS-селектор элементов сетки.
  • columnWidth — ширина колонок сетки. Может быть числом или селектором, например, .grid-sizer.
  • gutter — расстояние между колонками.
  • fitWidth — выравнивание всей сетки по центру контейнера.

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

При добавлении элементов после инициализации Masonry важно использовать методы appended, prepended и layout для корректного перерасчёта расположения:

var elem = document.createElement('div');
elem.className = 'grid-item';
grid.appendChild(elem);
msnry.appended(elem);
msnry.layout();
  • appended — добавление нового элемента в конец сетки.
  • prepended — добавление в начало.
  • layout — пересчёт всей сетки после изменений.

Для работы с асинхронным контентом, например, при загрузке изображений, используется библиотека imagesLoaded:

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

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

Расширения Masonry

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

  1. Фильтрация элементов Можно реализовать динамическую фильтрацию элементов по категориям, сочетая Masonry с классическим CSS и Jav * aScript:
var filterButtons = document.querySelectorAll('.filter-btn');
filterButtons.forEach(function(btn) {
  btn.addEventListener('click', function() {
    var category = btn.getAttribute('data-filter');
    var items = grid.querySelectorAll('.grid-item');
    items.forEach(function(item) {
      if(item.classList.contains(category) || category === 'all') {
        item.style.display = '';
      } else {
        item.style.display = 'none';
      }
    });
    msnry.layout();
  });
});

  1. Сортировка элементов Masonry не имеет встроенной сортировки, но можно реализовать её вручную с помощью Array.prototype.sort и последующего вызова appended или layout.

  2. Поддержка Infinite Scroll Для бесконечной подгрузки элементов часто используется связка Masonry + Infinite Scroll. Новый контент добавляется через appended, после чего вызывается layout.

  3. Адаптивная сетка Masonry позволяет создавать сетку, которая подстраивается под ширину окна. Используется комбинация CSS-свойства columnWidth и события resize:

window.addEventListener('resize', function() {
  msnry.layout();
});

Можно динамически менять columnWidth в зависимости от ширины окна, чтобы создавать полностью адаптивные сетки.

Пользовательские события

Masonry поддерживает события для расширенного контроля:

  • layoutComplete — вызывается после завершения перерасчёта всех элементов.
  • removeComplete — после удаления элементов из сетки.
  • appendComplete — после добавления новых элементов.

Пример подписки на событие:

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

Создание собственных плагинов

Для публикации расширений или плагинов важно соблюдать архитектуру Masonry. Плагин должен расширять прототип Masonry.prototype и корректно вызывать базовые методы:

Masonry.prototype.myCustomPlugin = function() {
  this.items.forEach(item => {
    // Дополнительная логика, например, анимация или эффект hover
    item.element.style.transition = 'transform 0.3s';
  });
  this.layout();
};

После создания плагина его можно подключить к любой сетке:

msnry.myCustomPlugin();

Это позволяет интегрировать новые возможности без изменения исходного кода библиотеки.

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

Для больших сеток с сотнями элементов критично использовать:

  • batch layout — группировка изменений и вызов layout один раз.
  • imagesLoaded — чтобы не вызывать лишние перерасчёты до загрузки контента.
  • requestAnimationFrame — для анимаций и плавного обновления положения элементов.
requestAnimationFrame(() => msnry.layout());

Поддержка CSS Grid и Flexbox

Хотя Masonry использует абсолютное позиционирование, его можно сочетать с CSS Grid или Flexbox для создания гибридных макетов, где Masonry отвечает за асимметричное заполнение, а CSS Grid задаёт общие линии и размеры блоков. Это особенно удобно при адаптивной верстке и при интеграции с современными фреймворками типа React или Vue.

Вывод

Библиотека Masonry в JavaScript предоставляет мощные возможности для создания динамичных сеток, которые адаптируются под контент и размер окна. Расширения, фильтрация, сортировка, адаптивные настройки и пользовательские события делают Masonry гибким инструментом, способным справляться с разнообразными интерфейсными задачами.

Оглавление