Подключение через CDN

Библиотека Muuri обеспечивает динамическое управление сеткой элементов с поддержкой перетаскивания, анимации и фильтрации. Для использования библиотеки без установки через npm можно подключить её напрямую через CDN (Content Delivery Network). Такой подход позволяет быстро интегрировать функционал Muuri в проект без сложной сборки.

Подключение скрипта и стилей

Для корректной работы Muuri необходимо подключить JavaScript-файл библиотеки. Стили подключаются опционально, так как Muuri не навязывает конкретного визуального оформления элементов, но базовые стили для контейнера и элементов рекомендуются.

<!-- Подключение CSS стилей для сетки -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/muuri@0.10.5/dist/muuri.min.css">

<!-- Подключение основной библиотеки Muuri -->
<script src="https://cdn.jsdelivr.net/npm/muuri@0.10.5/dist/muuri.min.js"></script>

Важно: версия библиотеки указывается явно. Это позволяет избежать проблем при обновлении CDN, когда новые версии могут содержать несовместимые изменения.

Создание контейнера сетки

После подключения скрипта можно создать контейнер, который будет управляться Muuri. Контейнером может быть любой HTML-элемент, содержащий дочерние элементы — ячейки сетки.

<div id="grid">
  <div class="item">Элемент 1</div>
  <div class="item">Элемент 2</div>
  <div class="item">Элемент 3</div>
</div>

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

#grid {
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: 150px;
  height: 150px;
  margin: 10px;
  background-color: #3498db;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  border-radius: 4px;
}

Инициализация Muuri

Инициализация сетки выполняется через создание нового экземпляра Muuri, передавая ему контейнер сетки. При подключении через CDN объект Muuri доступен глобально.

const grid = new Muuri('#grid', {
  dragEnabled: true,
  layout: {
    rounding: true
  },
  dragSort: true
});

Пояснения к настройкам:

  • dragEnabled – включает возможность перетаскивания элементов пользователем.
  • layout.rounding – округляет координаты до целых чисел для плавного отображения и устранения “дрожания” элементов.
  • dragSort – позволяет автоматически переставлять элементы при перемещении.

Загрузка и повторное размещение элементов

При динамическом добавлении новых элементов в сетку необходимо использовать метод add() и затем выполнять повторное размещение элементов с помощью layout().

const newItem = document.createElement('div');
newItem.className = 'item';
newItem.textContent = 'Новый элемент';

grid.add(newItem);
grid.layout();

Для удаления элементов используется метод remove():

const itemsToRemove = grid.getItems('.item:last-child');
grid.remove(itemsToRemove, { removeElements: true });
grid.layout();

Опция removeElements: если установлена в true, элемент удаляется не только из сетки, но и из DOM.

Фильтрация и сортировка

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

Фильтрация по CSS-классу:

grid.filter('.active'); // отображает только элементы с классом active

Сброс фильтрации:

grid.filter(() => true); // отображает все элементы

Сортировка элементов:

grid.sort((itemA, itemB) => {
  return itemA.getElement().textContent.localeCompare(itemB.getElement().textContent);
});

Анимация и оптимизация

Muuri по умолчанию использует CSS-трансформации для анимации перемещения элементов. При подключении через CDN можно управлять плавностью и длительностью через объект layout:

const grid = new Muuri('#grid', {
  layout: {
    duration: 400,   // продолжительность анимации в миллисекундах
    easing: 'ease',  // функция сглаживания
  }
});

Для крупных сеток рекомендуется включать layout.instant на время массового обновления, чтобы предотвратить лишние анимации:

grid.suspendLayout();
grid.add(newItems);
grid.resumeLayout();

Поддержка мобильных устройств

Muuri корректно работает на сенсорных устройствах при подключении через CDN. Перетаскивание поддерживается пальцем, а сетка автоматически адаптируется к ширине контейнера. Для улучшения UX можно добавить CSS для touch-устройств:

.item {
  touch-action: none; /* отключает стандартное поведение свайпов */
}

Заключение по использованию CDN

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

Оглавление