Что такое Muuri

Muuri — это современная библиотека для создания динамических, отзывчивых и анимированных сеток элементов в JavaScript. Она сочетает возможности управления положением элементов, сортировки, фильтрации и перетаскивания (drag-and-drop), обеспечивая гибкость интерфейсов без необходимости написания сложного кода с нуля.

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

Инициализация сетки

Для работы с Muuri требуется подключение скрипта библиотеки и создание контейнера с элементами:

<div id="grid">
  <div class="item"><div class="item-content">1</div></div>
  <div class="item"><div class="item-content">2</div></div>
  <div class="item"><div class="item-content">3</div></div>
</div>

Инициализация происходит через объект Muuri:

const grid = new Muuri('#grid', {
  dragEnabled: true,
  layout: {
    fillGaps: true
  },
  sortData: {
    id: (item) => parseInt(item.getElement().textContent, 10)
  }
});

Ключевые моменты при инициализации:

  • dragEnabled: true — позволяет перетаскивать элементы.
  • layout.fillGaps: true — автоматически заполняет пустые места при удалении или перемещении элементов.
  • sortData — позволяет задавать пользовательские функции сортировки.

Управление элементами сетки

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

Добавление и удаление элементов

const newItem = document.createElement('div');
newItem.className = 'item';
newItem.innerHTML = '<div class="item-content">4</div>';

grid.add(newItem);  // Добавление
grid.remove(newItem, { removeElements: true });  // Удаление

Особенности:

  • Метод add() принимает один элемент или массив элементов.
  • Метод remove() может удалять элементы только из сетки или полностью из DOM, если передан флаг removeElements: true.

Сортировка

Сортировка осуществляется через метод sort():

grid.sort((a, b) => {
  const aValue = parseInt(a.getElement().textContent, 10);
  const bValue = parseInt(b.getElement().textContent, 10);
  return aValue - bValue;
});

Примечание: Muuri позволяет применять несколько критериев сортировки одновременно, используя объект sortData и ключи для каждого критерия.

Фильтрация

Фильтрация элементов выполняется через метод filter():

grid.filter(item => parseInt(item.getElement().textContent, 10) % 2 === 0);
  • Метод принимает функцию, которая возвращает true для отображаемых элементов.
  • Остальные элементы скрываются с плавной анимацией.

Перетаскивание и анимация

Одной из сильных сторон Muuri является поддержка drag-and-drop с плавной анимацией. Элементы сетки перемещаются с естественной инерцией, а сетка перестраивается автоматически.

grid.on('dragReleaseEnd', () => {
  console.log('Элемент отпущен и сетка обновлена');
});

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

  • dragSort: true — разрешает менять порядок элементов при перетаскивании.
  • dragSortInterval — интервал проверки позиции для обновления сетки.
  • dragReleaseDuration — длительность анимации при отпускании элемента.

Настройка макета и адаптивность

Muuri поддерживает адаптивные сетки, автоматически подстраивающиеся под размер контейнера и элементы.

const grid = new Muuri('.grid', {
  layout: {
    rounding: false,
    fillGaps: true
  }
});
  • rounding: false — отключает округление координат, что полезно для точного позиционирования.
  • fillGaps: true — заполняет свободное пространство при изменении размеров элементов.

Адаптивность достигается сочетанием CSS и параметров сетки. Например, использование flex или grid для контейнера и фиксированных размеров элементов позволяет Muuri плавно перестраивать сетку при изменении ширины окна.

События Muuri

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

  • layoutStart и layoutEnd — начало и окончание перестройки сетки.
  • dragStart, dragMove, dragReleaseStart, dragReleaseEnd — управление перетаскиванием.
  • add, remove, show, hide — управление элементами.

Пример использования событий:

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

События позволяют реализовать интерактивные интерфейсы и динамически реагировать на действия пользователя.

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

Muuri оптимизирован для больших коллекций элементов:

  • Использует hardware-accelerated CSS transforms для плавной анимации.
  • Позволяет включать или отключать анимацию через layout.duration и layout.easing.
  • Поддерживает фильтрацию и сортировку без пересоздания DOM, что снижает нагрузку.

Для крупных проектов рекомендуется:

  • Минимизировать количество одновременно отображаемых элементов.
  • Использовать layout(true) после массовых изменений для мгновенного перераспределения без анимации.
  • Включать lazy-loading элементов и динамическое добавление при необходимости.

Интеграция с другими библиотеками

Muuri легко комбинируется с:

  • React — через refs и управление DOM-элементами.
  • Vue — через v-for и привязку к сетке после рендеринга.
  • Angular — через ViewChildren и прямую инициализацию Muuri.

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

Оглавление