Создание плагинов

Для начала работы с Masonry необходимо подключить библиотеку через <script> или с помощью npm/yarn. В случае npm:

import Masonry from 'masonry-layout';

Инициализация Masonry происходит на контейнере с элементами-«кирпичиками»:

const grid = document.querySelector('.grid');
const masonry = new Masonry(grid, {
  itemSelector: '.grid-item',
  columnWidth: 200,
  gutter: 10,
  percentPosition: true
});

itemSelector — CSS-селектор для элементов сетки.
columnWidth — ширина колонки; можно передавать число или элемент DOM.
gutter — промежуток между колонками.
percentPosition — использование процентов вместо фиксированных значений для адаптивной верстки.

Основные методы Masonry

Masonry предоставляет методы для управления сеткой в реальном времени:

masonry.layout() — пересчитывает расположение элементов.
masonry.appended(elements) — добавляет новые элементы в сетку и автоматически размещает их.
masonry.prepended(elements) — добавляет элементы в начало сетки.
masonry.remove(elements) — удаляет элементы и обновляет сетку.
masonry.reloadItems() — перезагружает элементы, полезно при динамическом изменении контента.
masonry.destroy() — полностью удаляет экземпляр Masonry и сбрасывает стили.

Работа с событиями

Masonry поддерживает несколько событий, на которые можно подписываться через on:

masonry.on('layoutComplete', function(items) {
  console.log('Сетка перестроена', items);
});

masonry.on('removeComplete', function(items) {
  console.log('Элементы удалены', items);
});

События дают возможность интегрировать Masonry с анимациями и динамическим контентом, например, после загрузки изображений или AJAX-запроса.

Создание плагинов для Masonry

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

Структура плагина

function MyPlugin(masonryInstance, options) {
  this.masonry = masonryInstance;
  this.options = Object.assign({}, this.defaults, options);
  this.init();
}

MyPlugin.prototype.defaults = {
  color: 'red'
};

MyPlugin.prototype.init = function() {
  this.applyStyles();
  this.masonry.on('layoutComplete', this.onLayoutComplete.bind(this));
};

MyPlugin.prototype.applyStyles = function() {
  this.masonry.items.forEach(item => {
    item.element.style.border = `2px solid ${this.options.color}`;
  });
};

MyPlugin.prototype.onLayoutCompl ete = function(items) {
  console.log('Плагин обработал новые элементы', items);
};

Конструктор получает экземпляр Masonry и опции плагина.
defaults определяет стандартные параметры, которые могут быть переопределены.
init выполняет первичную настройку и подписку на события.
Методы прототипа используются для добавления функционала, не нарушая базовую работу Masonry.

Подключение плагина

После создания плагина его можно инициализировать вместе с Masonry:

const masonry = new Masonry('.grid', { itemSelector: '.grid-item' });
const plugin = new MyPlugin(masonry, { color: 'blue' });

Динамическая интеграция с контентом

Плагины особенно полезны при работе с динамическими элементами, например, при загрузке изображений:

imagesLoaded(grid, function() {
  masonry.appended(newElements);
  plugin.applyStyles();
});

Это гарантирует, что элементы будут корректно размещены и стилизованы сразу после добавления на страницу.

Расширение возможностей Masonry

С помощью плагинов можно реализовать:

Анимацию при появлении новых элементов (fadeIn, slideUp).
Группировку и фильтрацию элементов по категориям.
Взаимодействие с drag-and-drop библиотеками.
Подсветку и визуальные эффекты при ресайзе окна.

Каждый плагин должен минимально вмешиваться в внутренние методы Masonry, чтобы не нарушать стабильность сетки. Использование событий и прототипного наследования позволяет создавать гибкие расширения, легко интегрируемые в проект.