Горизонтальная раскладка

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

Основные параметры горизонтальной раскладки

Для создания горизонтальной сетки в Muuri ключевым моментом является настройка layout и размеров элементов. Основные параметры:

  • layout: { horizontal: true } — задаёт горизонтальное расположение элементов.
  • layout: { fillGaps: true } — позволяет автоматически заполнять пустые места при перемещении элементов.
  • layout: { alignRight: false, alignBottom: false } — управляет выравниванием сетки по краям контейнера.

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

const grid = new Muuri('.grid', {
  layout: {
    horizontal: true,
    fillGaps: true,
    alignRight: false,
    alignBottom: false
  },
  dragEnabled: true
});

В этом примере элементы будут выстраиваться слева направо, автоматически заполняя промежутки. Флаг dragEnabled включает возможность перетаскивания элементов пользователем.

Контроль размеров элементов

В горизонтальной раскладке важно правильно управлять размерами элементов. Muuri позволяет использовать динамическое вычисление размеров через параметр layoutOnResize и методы refreshItems:

  • layoutOnResize: true — сетка автоматически перестраивается при изменении размеров контейнера или оконного окна.
  • grid.refreshItems().layout() — ручной пересчёт размеров и перераспределение элементов.

Пример динамической перестройки:

window.addEventListener('resize', () => {
  grid.refreshItems().layout();
});

Анимация и плавное перемещение

Muuri использует встроенную систему анимации для горизонтальных сеток. Основные опции:

  • layoutDuration — длительность анимации в миллисекундах.
  • layoutEasing — функция плавности, например 'ease', 'ease-in-out'.
  • dragSort — позволяет переставлять элементы внутри сетки или между несколькими сетками.

Пример:

const grid = new Muuri('.grid', {
  layout: {
    horizontal: true,
    fillGaps: true,
    alignRight: false,
    alignBottom: false,
    layoutDuration: 400,
    layoutEasing: 'ease-in-out'
  },
  dragEnabled: true,
  dragSort: true
});

Эта конфигурация обеспечивает плавное перемещение элементов при изменении их порядка.

Работа с динамическими элементами

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

  • Добавление:
const newItem = document.createElement('div');
newItem.className = 'item';
grid.add(newItem);
grid.layout();
  • Удаление:
const itemToRemove = grid.getItems()[0];
grid.remove(itemToRemove, { removeElements: true });
grid.layout();

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

Продвинутые приёмы выравнивания

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

  • Выравнивание по центру: используется комбинация alignRight: false и CSS-свойств контейнера.
  • Выравнивание с отступами: параметры gutter задают горизонтальные и вертикальные промежутки между элементами.
const grid = new Muuri('.grid', {
  layout: {
    horizontal: true,
    fillGaps: true
  },
  dragEnabled: true,
  layoutOnResize: true
});

CSS:

.grid {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.item {
  width: 150px;
  height: 150px;
}

Интеграция с несколькими сетками

Для горизонтальной раскладки часто используют dragSort между несколькими сетками:

const grid1 = new Muuri('.grid1', { layout: { horizontal: true }, dragEnabled: true });
const grid2 = new Muuri('.grid2', { layout: { horizontal: true }, dragEnabled: true });

grid1.on('dragEnd', () => grid1.refreshItems().layout());
grid2.on('dragEnd', () => grid2.refreshItems().layout());

grid1.sync(grid2);

Это позволяет перемещать элементы между горизонтальными сетками, сохраняя анимацию и порядок.

Производительность и оптимизация

При работе с большими горизонтальными сетками важно учитывать:

  • Минимизировать частые вызовы layout() при изменении одного элемента.
  • Использовать layoutOnResize: true только при необходимости, чтобы избежать постоянных перерасчётов.
  • Ограничивать количество одновременно анимируемых элементов через CSS и JavaScript.

Эффективная комбинация этих подходов обеспечивает плавную работу интерфейса даже с сотнями элементов в горизонтальной сетке.

Оглавление