Первый рабочий пример

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

Минимальный рабочий пример состоит из трёх частей:

  • HTML-разметка сетки
  • CSS-оформление элементов
  • инициализация Muuri в JavaScript

Muuri не требует сложной настройки. Достаточно подключить библиотеку и указать контейнер сетки.

Подключение библиотеки

Самый простой способ — использование CDN:

<script src="https://unpkg.com/muuri@0.9.5/dist/muuri.min.js"></script>

Подключение размещается перед закрывающим тегом </body> либо после разметки сетки.

Альтернативный способ — установка через npm:

npm install muuri

Использование в модульном проекте:

import Muuri from 'muuri';

В учебных примерах чаще применяется CDN-подключение, поскольку оно не требует сборщика модулей.

Базовая HTML-структура

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

Минимальная структура:

<div class="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 class="item">
    <div class="item-content">4</div>
  </div>
</div>

В структуре используются два уровня:

.item контейнер элемента сетки, которым управляет Muuri

.item-content внутреннее содержимое карточки

Такое разделение важно, поскольку Muuri применяет трансформации к внешнему контейнеру .item, а стили и анимации можно размещать внутри .item-content.

Минимальные CSS-стили

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

.grid {
  position: relative;
}

.item {
  width: 200px;
  height: 120px;
}

.item-content {
  width: 100%;
  height: 100%;
  background: #3498db;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border-radius: 6px;
}

Ключевые моменты:

  • контейнер .grid должен иметь position: relative
  • размеры элементов задаются через .item
  • визуальное оформление размещается внутри .item-content

Muuri самостоятельно вычисляет координаты элементов и перемещает их с помощью CSS-трансформаций.

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

После подготовки разметки и стилей создаётся экземпляр сетки.

var grid = new Muuri('.grid');

Происходит следующее:

  1. Muuri находит контейнер .grid
  2. собирает все дочерние элементы .item
  3. рассчитывает их размеры
  4. размещает элементы внутри контейнера
  5. применяет анимацию позиционирования

Полный пример:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Muuri Example</title>

  <style>
    .grid {
      position: relative;
    }

    .item {
      width: 200px;
      height: 120px;
      margin: 10px;
    }

    .item-content {
      width: 100%;
      height: 100%;
      background: #3498db;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      border-radius: 6px;
    }
  </style>
</head>

<body>

<div class="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 class="item"><div class="item-content">4</div></div>
</div>

<script src="https://unpkg.com/muuri@0.9.5/dist/muuri.min.js"></script>

<script>
  var grid = new Muuri('.grid');
</script>

</body>
</html>

После загрузки страницы элементы автоматически выстраиваются в адаптивную сетку.

Как Muuri рассчитывает расположение элементов

Muuri использует алгоритм плотной сетки. Он размещает элементы слева направо и сверху вниз, стараясь максимально эффективно заполнить пространство контейнера.

Алгоритм учитывает:

  • ширину элемента
  • высоту элемента
  • свободные области сетки
  • порядок элементов в DOM

Если карточки имеют разную высоту, сетка автоматически перестраивается.

Пример элементов разного размера:

.item.large {
  height: 200px;
}
<div class="item large">
  <div class="item-content">Big</div>
</div>

Muuri корректно перераспределяет элементы без перекрытий.

Добавление возможности перетаскивания

Одна из ключевых возможностей библиотеки — drag & drop.

Перетаскивание включается через опцию dragEnabled.

var grid = new Muuri('.grid', {
  dragEnabled: true
});

Теперь элементы можно перемещать мышью.

Во время перетаскивания Muuri выполняет несколько действий:

  1. элемент временно вынимается из сетки
  2. появляется “плавающая” версия карточки
  3. остальные элементы перестраиваются
  4. после отпускания элемент фиксируется на новой позиции

Эта логика реализована внутри библиотеки и не требует дополнительного кода.

Анимация перестроения сетки

Muuri автоматически анимирует изменения расположения элементов.

Когда элемент:

  • добавляется
  • удаляется
  • перемещается
  • сортируется

происходит плавное перемещение карточек.

Настройка анимации выполняется через параметр layoutDuration.

var grid = new Muuri('.grid', {
  layoutDuration: 300,
  layoutEasing: 'ease'
});

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

layoutDuration длительность анимации перестроения (в миллисекундах)

layoutEasing тип easing-функции CSS

Пример:

var grid = new Muuri('.grid', {
  layoutDuration: 500,
  layoutEasing: 'ease-in-out'
});

Получение элементов сетки

Muuri предоставляет API для работы с элементами.

Получение всех элементов:

var items = grid.getItems();

items содержит массив объектов MuuriItem.

Каждый объект содержит методы управления карточкой:

  • получение DOM-элемента
  • изменение состояния
  • управление видимостью
  • получение размеров

Пример доступа к DOM-элементу:

var element = items[0].getElement();

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

Новые карточки можно добавлять динамически.

HTML-элемент создаётся стандартным способом:

var element = document.createElement('div');
element.className = 'item';

element.innerHTML = `
  <div class="item-content">New</div>
`;

Добавление в Muuri:

grid.add(element);

Muuri:

  1. добавляет элемент в контейнер
  2. пересчитывает сетку
  3. анимирует появление карточки

Удаление элементов

Удаление производится методом remove.

var items = grid.getItems();

grid.remove(items[0], {
  removeElements: true
});

Опция removeElements: true означает удаление DOM-элемента из документа.

Если параметр не указан, элемент лишь исключается из сетки, но остаётся в DOM.

Перестроение сетки

Иногда требуется вручную инициировать перерасчёт расположения.

Это выполняется методом layout().

grid.layout();

Такой вызов полезен в случаях:

  • изменения размеров элементов
  • загрузки изображений
  • изменения содержимого карточек

Загрузка изображений и пересчёт сетки

Частая проблема — изменение высоты карточек после загрузки изображений.

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

Решение — пересчитать сетку после загрузки:

window.addEventListener('load', function() {
  grid.layout();
});

Более точный подход — использование библиотеки imagesLoaded:

imagesLoaded('.grid', function() {
  grid.layout();
});

Это гарантирует корректные размеры элементов.

Полный первый рабочий пример

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<style>

.grid {
  position: relative;
}

.item {
  width: 200px;
  height: 120px;
  margin: 10px;
}

.item-content {
  width: 100%;
  height: 100%;
  background: #3498db;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border-radius: 6px;
}

</style>

</head>

<body>

<div class="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 class="item">
    <div class="item-content">4</div>
  </div>

</div>

<script src="https://unpkg.com/muuri@0.9.5/dist/muuri.min.js"></script>

<script>

var grid = new Muuri('.grid', {
  dragEnabled: true,
  layoutDuration: 400,
  layoutEasing: 'ease'
});

</script>

</body>
</html>

После загрузки страницы формируется интерактивная сетка, в которой:

  • элементы автоматически выравниваются
  • карточки можно перетаскивать
  • сетка плавно перестраивается
  • новые элементы можно добавлять через API библиотеки.
Оглавление