Проверка корректности инициализации

Инициализация сетки в библиотеке Muuri — это процесс создания экземпляра класса Muuri, привязанного к DOM-контейнеру и набору элементов-элементов (items). Корректность инициализации влияет на все последующие операции: сортировку, фильтрацию, перетаскивание, динамическое добавление и перерасчёт макета.

При создании экземпляра выполняется несколько ключевых этапов:

Поиск контейнера.
Определение элементов сетки.
Расчёт размеров элементов.
Построение начального layout.
Привязка обработчиков событий.

Любая ошибка на этих этапах приводит к некорректной работе сетки или полной остановке инициализации.

Базовая инициализация сетки

Минимальный пример создания сетки:

const grid = new Muuri('.grid', {
  items: '.item'
});

Контейнер:

<div class="grid">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

После выполнения кода Muuri:

находит контейнер .grid
собирает все .item
формирует внутренний список элементов
рассчитывает layout
позиционирует элементы через transform

Если любой из этапов выполняется некорректно, сетка либо не появится, либо будет работать с ошибками.

Проверка существования контейнера

Первое условие корректной инициализации — наличие DOM-контейнера.

Ошибка:

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

если .grid отсутствует в DOM.

Проверка:

const container = document.querySelector('.grid');

if (!container) {
  throw new Error('Контейнер .grid не найден');
}

const grid = new Muuri(container);

Преимущества явной проверки:

исключение тихих ошибок
понятная диагностика
контроль загрузки DOM

Инициализация после загрузки DOM

Muuri должен запускаться после создания DOM-структуры.

Некорректный вариант:

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

если скрипт подключён в <head>.

Корректный вариант:

document.addEventListener('DOMContentLoaded', () => {
  const grid = new Muuri('.grid');
});

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

<script src="app.js"></script>
</body>

Проверка элементов сетки

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

Явное указание селектора:

const grid = new Muuri('.grid', {
  items: '.item'
});

Проверка наличия элементов:

const items = document.querySelectorAll('.grid .item');

if (!items.length) {
  console.warn('Элементы сетки отсутствуют');
}

Отсутствие элементов не вызывает критическую ошибку, но сетка будет пустой.

Проверка структуры элемента

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

Рекомендуемая структура:

<div class="grid">
  <div class="item">
    <div class="item-content">
      Контент
    </div>
  </div>
</div>

Причины:

внутренний контейнер упрощает анимации
предотвращает проблемы с padding и margin
улучшает производительность

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

const grid = new Muuri('.grid', {
  items: '.item'
});

Проверка CSS перед инициализацией

Muuri позиционирует элементы с помощью transform. Контейнер должен иметь корректные стили.

Минимальный CSS:

.grid {
  position: relative;
}

.item {
  position: absolute;
}

.item-content {
  position: relative;
}

Проблемы возникают если:

position: static
display: inline
элементы имеют конфликтующие transform

Проверка размеров элементов

Muuri рассчитывает layout на основе размеров элементов.

Если элементы не имеют размеров, layout будет некорректным.

Ошибка:

.item {
  width: auto;
}

Рекомендуется:

.item {
  width: 200px;
}

или через flex-контент внутри.

Проверка загрузки изображений

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

Проблема:

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

Решение — пересчёт layout.

grid.refreshItems().layout();

или ожидание загрузки изображений.

Проверка состояния элементов Muuri

После инициализации каждый DOM-элемент превращается во внутренний объект Item.

Получение списка:

const items = grid.getItems();

Проверка количества:

console.log(items.length);

Если число элементов отличается от ожидаемого — проблема в селекторе.

Проверка DOM-связи элемента

Каждый элемент Muuri хранит ссылку на DOM-узел.

Получение DOM-элемента:

const item = grid.getItems()[0];
const element = item.getElement();

Это позволяет проверить:

существует ли элемент
не удалён ли он из DOM
соответствует ли селектору

Проверка статуса элемента

Muuri хранит состояние каждого элемента.

Получение состояния:

item.isActive();

Возможные состояния:

Состояние	Описание
active	элемент отображается
hidden	элемент скрыт
dragging	элемент перетаскивается

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

Проверка работы layout

После инициализации автоматически запускается построение layout.

Принудительный запуск:

grid.layout();

Если элементы не перемещаются, проверяются:

ошибки CSS
размеры элементов
container width

Проверка событий инициализации

Muuri предоставляет события жизненного цикла.

Пример отслеживания:

grid.on('layoutEnd', function(items) {
  console.log('Layout завершён', items.length);
});

Это помогает убедиться, что layout действительно выполняется.

Другие полезные события:

layoutStart
layoutEnd
add
remove
move
dragStart
dragEnd

Проверка ошибок инициализации

Распространённые ошибки:

Контейнер не найден

Uncaught Error: Container element not found

Причина:

неправильный селектор
ранний запуск скрипта

Элементы не найдены

Сетка создаётся, но без элементов.

Причина:

items: '.wrong-selector'

Нулевые размеры элементов

Если ширина элемента равна нулю:

layout calculation error

Причина:

display:none
элемент внутри скрытого контейнера

Проверка инициализации через консоль

Диагностика:

console.log(grid);

Проверяем:

grid._items
grid._layout
grid._settings

Проверка инициализации при динамическом DOM

Если элементы добавляются позже:

grid.add(newItems);

Если DOM изменился без Muuri, необходимо обновление:

grid.refreshItems();
grid.layout();

Проверка множественных сеток

Muuri поддерживает несколько сеток.

Пример:

const grid1 = new Muuri('.grid-1');
const grid2 = new Muuri('.grid-2');

Диагностика:

console.log(grid1.getItems().length);
console.log(grid2.getItems().length);

Ошибки возникают если:

одинаковые селекторы
пересекающиеся элементы

Проверка опций инициализации

Muuri принимает объект конфигурации.

Пример:

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

Диагностика:

console.log(grid._settings);

Это позволяет проверить, применились ли параметры.

Проверка destroy и повторной инициализации

Иногда сетка создаётся повторно.

Перед повторной инициализацией необходимо уничтожение:

grid.destroy();

После:

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

Если этого не сделать, возникают:

двойные события
утечки памяти
конфликт drag-системы

Диагностическая функция проверки инициализации

Практическая утилита:

function validateMuuriInit(selector) {

  const container = document.querySelector(selector);

  if (!container) {
    console.error('Контейнер не найден');
    return false;
  }

  const items = container.querySelectorAll('.item');

  if (!items.length) {
    console.warn('Элементы сетки отсутствуют');
  }

  items.forEach(item => {
    const rect = item.getBoundingClientRect();

    if (rect.width === 0 || rect.height === 0) {
      console.warn('Элемент имеет нулевой размер', item);
    }
  });

  return true;
}

Использование:

if (validateMuuriInit('.grid')) {
  const grid = new Muuri('.grid');
}

Контроль корректной инициализации

Надёжная инициализация Muuri включает проверку следующих условий:

контейнер существует в DOM
элементы сетки присутствуют
элементы имеют размеры
DOM полностью загружен
CSS соответствует требованиям
изображения загружены или выполняется refresh
не происходит повторной инициализации
селекторы указаны корректно

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