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

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

<div id="grid">
  <div class="item">Элемент 1</div>
  <div class="item">Элемент 2</div>
  <div class="item">Элемент 3</div>
  <div class="item">Элемент 4</div>
</div>
  • #grid — контейнер сетки. Может быть идентификатором (id) или классом (class). Именно к этому контейнеру будет привязана инициализация Muuri.
  • .item — каждый элемент сетки. Muuri автоматически управляет их позиционированием и анимацией.

Важно: все элементы сетки должны быть непустыми блоками, чтобы библиотека могла корректно определять размеры и положение. Даже если элемент будет содержать только текст, он должен быть в отдельном блоке <div>.

Подключение Muuri

Для работы Muuri требуется подключение его скрипта и стилей (если используется CSS для базового оформления элементов). Минимальный способ — подключение через CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/muuri@0.10.5/dist/muuri.min.css">
<script src="https://cdn.jsdelivr.net/npm/muuri@0.10.5/dist/muuri.min.js"></script>
  • CSS подключается для базовых стилей элементов, чтобы сетка выглядела аккуратно и элементы имели размеры.
  • JS подключается для инициализации и управления сеткой Muuri.

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

После подключения скрипта создаётся объект Muuri, который управляет контейнером:

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

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

  • Первый аргумент '#grid' — селектор контейнера сетки.
  • Параметр layout.fillGaps отвечает за заполнение пустых мест в сетке, создавая плотное расположение элементов.

Можно добавлять дополнительные опции для управления поведением сетки:

const grid = new Muuri('#grid', {
  dragEnabled: true,       // возможность перетаскивания элементов
  dragSort: true,          // сортировка при перетаскивании
  layoutDuration: 400,     // время анимации перестановки элементов
  layoutEasing: 'ease'     // тип анимации
});

Основные правила структуры элементов

  1. Каждый элемент должен быть отдельным блоком. Например:
<div class="item">
  <div class="item-content">Содержимое</div>
</div>
  • .item-content позволяет отделить визуальное оформление от самой логики Muuri. Это облегчает стилизацию и добавление событий.

  1. Контейнер и элементы должны быть видимыми при инициализации. Muuri рассчитывает размеры элементов только после того, как они полностью загружены и отображаются. Если элементы скрыты (например, через display: none), позиции могут вычислиться неправильно.

  2. Использование классов вместо идентификаторов удобно при наличии нескольких сеток на странице:

<div class="grid">
  <div class="item">Элемент A</div>
  <div class="item">Элемент B</div>
</div>

<div class="grid">
  <div class="item">Элемент C</div>
  <div class="item">Элемент D</div>
</div>

Инициализация нескольких сеток:

const grids = document.querySelectorAll('.grid');
grids.forEach(gridElement => {
  new Muuri(gridElement, { layout: { fillGaps: true } });
});

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

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

#grid {
  position: relative;
}

.item {
  position: absolute;
  width: 200px;
  height: 150px;
  margin: 10px;
  background-color: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
}
  • position: absolute; — обязательна для Muuri, чтобы библиотека могла управлять расположением элементов.
  • Задаются размеры элементов, чтобы сетка могла корректно распределять их в контейнере.
  • Использование flex внутри .item позволяет выравнивать содержимое по центру.

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

Оглавление