Конструктор Grid

В библиотеке Muuri конструктор Grid является центральным элементом, отвечающим за создание и управление сеткой элементов на странице. Создание сетки начинается с вызова конструктора и передачи ему контейнера, содержащего элементы, которые должны быть организованы.

const grid = new Muuri('.grid');

В этом примере '.grid' — CSS-селектор контейнера, внутри которого Muuri найдет все дочерние элементы и превратит их в items.

Ключевые параметры конструктора

Конструктор Grid поддерживает множество опций, позволяющих тонко настраивать поведение сетки:

  • items — массив HTML-элементов или объектов Muuri.Item, которые будут добавлены в сетку при инициализации.

  • layout — объект конфигурации для управления размещением элементов:

    • fillGaps — Boolean, определяет, будет ли сетка автоматически заполнять пустые места при изменении размеров элементов.
    • horizontal — Boolean, указывает, будет ли сетка горизонтальной вместо вертикальной.
    • alignRight / alignBottom — выравнивание элементов в контейнере.

  • dragEnabled — Boolean, включает или отключает возможность перетаскивания элементов.

  • dragSort — Boolean или функция, позволяющая автоматически сортировать элементы при перетаскивании.

  • layoutOnInit — Boolean, указывает, выполнять ли автоматическое выравнивание элементов сразу после создания сетки.

const grid = new Muuri('.grid', {
  dragEnabled: true,
  layout: {
    fillGaps: true
  }
});

Методы Grid

Конструктор создает объект, который предоставляет широкий набор методов для управления сеткой:

  • add(items, options) — добавляет новые элементы в сетку.
  • remove(items, options) — удаляет элементы из сетки.
  • show(items, options) / hide(items, options) — управляет видимостью элементов с анимацией.
  • filter(predicate, options) — фильтрует элементы по заданной функции или селектору.
  • sort(compareFunction, options) — сортирует элементы на основе функции сравнения.
  • layout([options]) — пересчитывает позиции элементов и применяет их к DOM.
  • refreshItems() — обновляет информацию о размерах элементов, если они изменились.
grid.add(document.querySelectorAll('.new-item'));
grid.layout();

События сетки

Конструктор Grid позволяет подписываться на множество событий для динамического управления сеткой:

  • ‘add’ — вызывается при добавлении элементов.
  • ‘remove’ — при удалении элементов.
  • ‘layoutStart’ / ‘layoutEnd’ — до и после применения новой раскладки.
  • ‘dragStart’ / ‘dragEnd’ — при начале и завершении перетаскивания.
  • ‘filter’ — при применении фильтров.

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

grid.on('layoutEnd', () => {
  console.log('Раскладка завершена');
});

Настройка перетаскивания

Drag-and-drop — одно из ключевых преимуществ Muuri. Параметры конструктора позволяют гибко управлять поведением:

  • dragContainer — контейнер, куда будут помещаться элементы во время перетаскивания.
  • dragSortPredicate — функция для определения позиции элемента относительно других во время drag.
  • dragReleaseDuration — продолжительность анимации возвращения элемента после перетаскивания.
  • dragReleaseEasing — функция easing для анимации.
const grid = new Muuri('.grid', {
  dragEnabled: true,
  dragSort: true,
  dragReleaseDuration: 400,
  dragReleaseEasing: 'ease'
});

Связывание нескольких сеток

Конструктор Grid позволяет связывать несколько сеток для перемещения элементов между ними. Для этого используется опция dragSort с массивом других сеток:

const grid1 = new Muuri('.grid1', { dragEnabled: true });
const grid2 = new Muuri('.grid2', { dragEnabled: true });

grid1.on('dragReleaseEnd', (item) => {
  grid2.add(item.getElement());
});

Работа с layout на лету

Метод layout можно вызывать с параметрами для тонкой настройки анимации:

  • instant — Boolean, отключает анимацию.
  • queue — Boolean, добавляет вызов в очередь изменений.
  • onFinish — callback, который вызывается после завершения layout.
grid.layout({
  instant: false,
  onFinish: () => console.log('Новая раскладка завершена')
});

Идентификация элементов

Каждый элемент, добавленный через Grid, оборачивается объектом Muuri.Item, который предоставляет методы для управления конкретным элементом:

  • getElement() — возвращает HTML-элемент.
  • show() / hide() — управление видимостью.
  • getGrid() — возвращает родительскую сетку.
  • getId() — уникальный идентификатор элемента.
const items = grid.getItems();
items[0].hide();

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

  • Использовать refreshItems после динамического изменения размеров элементов.
  • Группировать изменения с помощью layout с queue: true, чтобы минимизировать количество перерасчетов.
  • Отключать drag для сеток с большим количеством элементов, если перетаскивание не требуется.

Итоговая структура

Конструктор Grid объединяет:

  • Инициализацию сетки с элементами.
  • Настройку расположения и анимаций.
  • Управление перетаскиванием и взаимодействием с другими сетками.
  • Методы для фильтрации, сортировки и управления видимостью элементов.
  • Подписку на события для полного контроля над динамическим поведением сетки.

Эта функциональность делает Muuri Grid гибким инструментом для построения интерактивных и адаптивных интерфейсов.

Оглавление