Muuri — это JavaScript-библиотека для создания адаптивных сеточных интерфейсов в веб-браузере. Она объединяет в одном инструменте функции по автоматическому размещению элементов в сетке, а также возможности динамической сортировки, фильтрации и перетаскивания (drag-and-drop). Библиотека реализует механизм компоновки, который учитывает размеры и положения элементов, обеспечивает плавные анимации при изменении порядка и поддерживает реагирование на изменение размеров контейнера и элементов.
Разработка Muuri ориентирована на использование в интерактивных пользовательских интерфейсах, где требуется гибкая вёрстка карточек, галерей, досок с элементами и др. В основе подхода лежит представление сетки как набора элементов с позиционированием и анимационной координацией их переходов при добавлении, удалении, сортировке или изменении размеров. Документация и примеры демонстрируют применение библиотеки без привязки к конкретному фреймворку, что позволяет интегрировать её в проекты на чистом JavaScript или сочетать с библиотеками и фреймворками фронтенда.
- Адаптивное размещение: автоматическое расположение элементов в сетке с учётом их размеров и доступного пространства.
- Сортировка: изменение порядка элементов по пользовательским критериям с анимированными переходами.
- Фильтрация: скрытие и отображение элементов на основе условий без разрушения структуры сетки.
- Перетаскивание (drag-and-drop): поддержка перетаскивания элементов внутри сетки и между сетками с управлением поведением при захвате и отпускании.
- Плавные анимации: интерполяция положения и размера элементов при изменениях для обеспечения плавного визуального перехода.
- Реакция на изменения размеров: автоматическое перераспределение при изменении размеров контейнера или элементов (reflow).
- Гибкая конфигурация: опции для настройки шагов компоновки, поведения при перетаскивании, задержек и кривых анимации.
- События и API: программный доступ к жизненному циклу элементов и сетки через события и методы для интеграции в приложения.
- Поддержка нескольких сеток: возможность связывать и синхронизировать несколько экземпляров сетки для обмена элементами.
- Кроссбраузерность: реализована с учётом работы в современных браузерах без зависимости от серверных компонентов.