Подключение зависимостей

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

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

Для быстрого прототипирования и минимальной настройки удобно использовать CDN. Основной скрипт и стили можно подключить прямо в HTML:

<!-- Стили Muuri -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/muuri@0.10.4/dist/muuri.min.css">

<!-- Скрипт Muuri -->
<script src="https://cdn.jsdelivr.net/npm/muuri@0.10.4/dist/muuri.min.js"></script>

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

  • Версию библиотеки важно фиксировать, чтобы избежать несовместимости при обновлениях.
  • Подключение должно быть после загрузки DOM, иначе инициализация сетки может завершиться с ошибкой.
  • Встраивание через <script> делает библиотеку доступной глобально через объект Muuri.

Пример инициализации сетки после подключения через CDN:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const grid = new Muuri('.grid', {
      dragEnabled: true,
      layout: {
        fillGaps: true
      }
    });
  });
</script>

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

Для профессиональной разработки предпочтительнее использовать пакетный менеджер:

npm install muuri
# или
yarn add muuri

После установки библиотеку можно импортировать в проект:

// ES6 import
import Muuri from 'muuri';

// CommonJS require
const Muuri = require('muuri');

Особенности использования через npm:

  • Позволяет интегрировать Muuri с современными сборщиками: Webpack, Parcel, Vite.
  • Обеспечивает контроль версий через package.json.
  • Возможна настройка Tree Shaking для уменьшения итогового бандла.

Пример инициализации сетки в модульной структуре:

import Muuri from 'muuri';

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

Стили и кастомизация

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

.grid {
  position: relative;
}
.grid-item {
  position: absolute;
  width: 200px;
  margin: 10px;
}
.grid-item-content {
  background: #f0f0f0;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

Принципиальные моменты:

  • position: absolute для .grid-item требуется для динамического перемещения элементов.
  • Все изменения расположения элементов контролируются Muuri, ручное управление top/left недопустимо.
  • Настройка внешнего вида через .grid-item-content не влияет на логику сетки, но улучшает визуальное восприятие.

Дополнительные зависимости

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

  • ImagesLoaded — для корректного расчёта сетки после загрузки изображений.
  • SortableJS или собственные плагины — для интеграции с другими системами сортировки.

Пример интеграции с ImagesLoaded:

import imagesLoaded from 'imagesloaded';
import Muuri from 'muuri';

const gridElement = document.querySelector('.grid');
const grid = new Muuri(gridElement, {
  dragEnabled: true
});

imagesLoaded(gridElement, () => {
  grid.refreshItems().layout();
});

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

Практические рекомендации

  1. Подключение должно соответствовать окружению: CDN — для прототипов, npm — для продакшена.
  2. Следить за версией: Muuri активно развивается, и мелкие изменения могут влиять на API.
  3. Стилизация и структура HTML важны: без корректного CSS сетка может работать некорректно.
  4. Инициализация после DOMContentLoaded: предотвращает ошибки при обращении к несуществующим элементам.
  5. Учитывать дополнительные зависимости при работе с изображениями: без imagesLoaded сетка может ломаться при асинхронной загрузке картинок.

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

Оглавление