Создание экземпляра Grid

Для работы с библиотекой Muuri первым шагом является создание экземпляра Grid, который управляет расположением элементов на странице. Конструктор принимает два основных параметра:

const grid = new Muuri(container, options);
  • container — DOM-элемент или селектор контейнера, содержащего элементы сетки.
  • options — объект с настройками поведения сетки и элементов.

Пример базовой инициализации

const grid = new Muuri('.grid', {
  items: '.item',           // CSS-селектор элементов сетки
  layout: {
    rounding: true          // округление координат для плавного позиционирования
  }
});

В данном примере .grid — контейнер сетки, а .item — отдельные элементы, которые будут упорядочены и анимированы библиотекой.

Основные параметры конструктора

items

Определяет элементы, которые Muuri будет считать элементами сетки. Может быть:

  • CSS-селектором ('.item')
  • Массивом DOM-элементов
  • NodeList

Пример:

items: document.querySelectorAll('.item')

layout

Объект с параметрами раскладки:

  • fillGaps — true/false, заполнять ли пустоты при изменении размеров элементов.
  • rounding — true/false, округлять координаты для устранения дрожания элементов.
  • horizontal — true/false, устанавливает горизонтальную ориентацию сетки.
layout: {
  fillGaps: true,
  rounding: true,
  horizontal: false
}

dragEnabled

Включает или отключает возможность перетаскивания элементов.

dragEnabled: true

Методы экземпляра Grid для управления элементами

add()

Добавление новых элементов в сетку:

const newItem = document.createElement('div');
newItem.classList.add('item');
grid.add(newItem);

remove()

Удаление элементов из сетки:

grid.remove(grid.getItems().slice(0, 1), { removeElements: true });

Параметр removeElements определяет, удаляется ли элемент из DOM полностью.

layout()

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

grid.layout();

refreshItems()

Обновляет внутренние данные о размерах элементов. Рекомендуется использовать после изменения контента элементов:

grid.refreshItems().layout();

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

Muuri позволяет реагировать на действия с элементами сетки через события:

  • add — элемент добавлен
  • remove — элемент удален
  • layoutStart — начало перестройки сетки
  • layoutEnd — завершение перестройки

Пример подписки:

grid.on('layoutEnd', () => {
  console.log('Сетка обновлена');
});

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

Включение drag-and-drop

const grid = new Muuri('.grid', {
  dragEnabled: true,
  dragSort: true,
  dragContainer: document.body,
  dragStartPredicate: {
    distance: 10,     // минимальное смещение для начала перетаскивания
    handle: '.handle' // элемент, с которого можно перетаскивать
  }
});

Методы для работы с перетаскиванием

  • enableDrag() — включить drag для отдельных элементов
  • disableDrag() — отключить drag для отдельных элементов
grid.getItems().forEach(item => item.enableDrag());

Фильтрация и сортировка элементов

Экземпляр Grid позволяет фильтровать и сортировать элементы без изменения DOM:

grid.filter(item => item.getElement().dataset.category === 'cat1');
grid.sort((a, b) => a.getElement().dataset.order - b.getElement().dataset.order);
  • filter() принимает функцию или строковый селектор.
  • sort() принимает функцию сравнения, аналогичную стандартному Array.prototype.sort.

Асинхронное обновление сетки

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

grid.refreshItems().layout();

Если элементы подгружаются асинхронно, вызов refreshItems() гарантирует правильное измерение размеров, а layout() — корректное расположение.

Советы по оптимизации

  • Для больших сеток лучше использовать layout: { rounding: true } для повышения производительности.
  • Избегать многократного вызова layout() без необходимости — использовать цепочку refreshItems().layout().
  • Для динамического добавления большого числа элементов применять метод add(itemsArray, { layout: false }), а затем один раз вызвать layout().

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

Оглавление