Кастомные методы

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

Кастомные методы обычно используются для:

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

Структура кастомного метода

Кастомный метод в Masonry представляет собой функцию, которая получает два ключевых параметра:

  1. items — массив DOM-элементов, участвующих в раскладке. Каждый элемент обёрнут объектом Masonry.Item.
  2. callback — функция, вызываемая после завершения операции, чтобы Masonry мог обновить позиции элементов.

Простейший пример кастомного метода:

Masonry.prototype.filterItems = function(filterFn, callback) {
    const filteredItems = this.items.filter(item => filterFn(item.element));
    this.layoutItems(filteredItems);
    if (callback) callback(filteredItems);
};

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

Взаимодействие с внутренними методами

Cоздавая кастомные методы, важно учитывать работу внутренних методов Masonry:

  • layoutItems(items) — перерасчёт позиций для указанного набора элементов.
  • reloadItems() — обновление массива this.items на основе текущих DOM-элементов.
  • stamp(elements) — «закрепление» элементов, которые не должны перемещаться при компоновке.

Кастомные методы часто комбинируют эти функции. Например, метод для скрытия элементов с последующей анимацией:

Masonry.prototype.hideAndLayout = function(selector) {
    const itemsToHide = this.items.filter(item => item.element.matches(selector));
    itemsToHide.forEach(item => {
        item.element.style.transition = 'opacity 0.3s';
        item.element.style.opacity = 0;
    });

    setTimeout(() => {
        itemsToHide.forEach(item => this.remove(item.element));
        this.layout();
    }, 300);
};

Здесь используется встроенный метод remove для удаления элемента из сетки, а layout — для перестройки сетки после изменения видимости.

Расширение Masonry через прототип

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

Masonry.prototype.customMethod = function(options) {
    this.items.forEach(item => {
        if (options.condition(item.element)) {
            options.action(item.element);
        }
    });
    this.layout();
};

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

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

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

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

Пример интеграции событий:

Masonry.prototype.fadeInNewItems = function(newElements) {
    const fragment = document.createDocumentFragment();
    newElements.forEach(el => {
        el.style.opacity = 0;
        fragment.appendChild(el);
    });
    this.element.appendChild(fragment);
    this.appended(newElements);

    newElements.forEach(el => {
        el.style.transition = 'opacity 0.5s';
        el.style.opacity = 1;
    });

    this.on('layoutComplete', () => {
        console.log('Новая раскладка завершена');
    });
};

Метод appended автоматически обновляет массив this.items, а событие layoutComplete позволяет синхронизировать последующие действия, например, подключение внешних плагинов или lazy-loading изображений.

Приёмы оптимизации кастомных методов

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

  2. Фильтрация перед добавлением в сетку Проверять элементы до вызова appended или layoutItems, чтобы исключить ненужные элементы из DOM.

  3. Использование встроенных анимаций Masonry Встроенные свойства transitionDuration и transitionProperty позволяют синхронизировать кастомные методы с анимацией перестройки сетки.

  4. Асинхронные операции Если кастомный метод взаимодействует с API, использовать async/await и вызывать layout только после полной загрузки контента.

Примеры практических кастомных методов

  1. Метод для динамической сортировки элементов по атрибуту:
Masonry.prototype.sortByAttribute = function(attr) {
    const sorted = this.items.sort((a, b) => {
        return a.element.getAttribute(attr) > b.element.getAttribute(attr) ? 1 : -1;
    });
    this.layoutItems(sorted);
};
  1. Метод для группировки элементов по категориям:
Masonry.prototype.groupByCategory = function(categoryFn) {
    const groups = {};
    this.items.forEach(item => {
        const category = categoryFn(item.element);
        if (!groups[category]) groups[category] = [];
        groups[category].push(item);
    });
    return groups;
};
  1. Метод для постепенного появления элементов с задержкой:
Masonry.prototype.staggeredReveal = function() {
    this.items.forEach((item, index) => {
        item.element.style.opacity = 0;
        setTimeout(() => {
            item.element.style.transition = 'opacity 0.4s';
            item.element.style.opacity = 1;
        }, index * 100);
    });
};

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

Оглавление