Вертикальная раскладка

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

Создание контейнера и элементов

Вертикальная раскладка начинается с правильного HTML-контейнера. Контейнер должен содержать набор элементов с одинаковым или динамически меняющимся размером по ширине. Пример базовой структуры:


  
1

  
2

  
3

  
4

Каждый элемент должен иметь стили, обеспечивающие фиксированную ширину и динамическую высоту, чтобы Muuri мог корректно располагать их по вертикали:

#grid {
  width: 300px; /* фиксированная ширина контейнера */
}
.item {
  width: 100%; /* ширина элемента под контейнер */
  margin-bottom: 10px; /* вертикальный отступ между элементами */
  box-sizing: border-box;
}

Инициализация Muuri для вертикальной сетки

Для вертикальной раскладки создается экземпляр Muuri с указанием контейнера и ключевых опций:

const grid = new Muuri('#grid', {
  layout: {
    fillGaps: true,  // заполняет пустоты при изменении размера элементов
    horizontal: false, // критично для вертикальной раскладки
    alignRight: false,
    alignBottom: false
  },
  dragEnabled: true // если требуется перетаскивание элементов
});
  • horizontal: false — ключевой параметр, который определяет, что элементы будут располагаться вертикально.
  • fillGaps: true — обеспечивает заполнение пустых мест при изменении размеров элементов или сортировке.

Управление порядком элементов

Muuri позволяет динамически сортировать элементы с помощью критериев сортировки. Для вертикальной раскладки удобно использовать свойства top и height каждого элемента:

grid.sort((a, b) => {
  return a.getHeight() - b.getHeight();
});

С помощью этого подхода более высокие элементы будут располагаться ниже, а более низкие — выше, сохраняя вертикальный поток.

Фильтрация и скрытие элементов

Для вертикальной раскладки фильтрация работает так же, как и для стандартной сетки, но нужно учитывать, что скрытие элемента влияет на общую высоту контейнера. Пример фильтрации по классу:

grid.filter(item => item.getElement().classList.contains('active'));

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

Реакция на изменение размера элементов

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

// обновление размеров элементов
grid.refreshItems().layout();

Это позволяет корректно перераспределять элементы, если их высота изменяется из-за контента, например, текста или изображений.

Анимация перемещений

Перемещение элементов в вертикальной раскладке может быть плавным благодаря встроенной анимации Muuri. Опции можно настроить следующим образом:

grid.layout(true); // true включает анимацию

Параметры анимации можно задать глобально:

grid.on('layoutStart', () => console.log('Начало перераспределения'));
grid.on('layoutEnd', () => console.log('Конец перераспределения'));

Поддержка адаптивного дизайна

Для вертикальной сетки важно поддерживать адаптивность контейнера. Использование CSS-свойств width: 100% для элементов и медиа-запросов для контейнера позволяет Muuri корректно перераспределять элементы при изменении ширины экрана.

@media (max-width: 600px) {
  #grid {
    width: 100%;
  }
}

Взаимодействие с drag-and-drop

Вертикальная раскладка особенно удобна для перетаскивания элементов. Muuri обеспечивает плавное перетаскивание, автоматическое перераспределение элементов и поддержку коллизий. Пример настройки drag:

grid.on('dragEnd', (item) => {
  grid.layout();
});

Можно ограничивать направления перетаскивания только вертикально:

grid.getItems().forEach(item => {
  item.getElement().style.cursor = 'grab';
  item.on('dragMove', (event) => {
    event.preventDefault(); // блокировка горизонтального движения
  });
});

Интеграция с динамическим контентом

Вертикальная раскладка Muuri идеально подходит для ленты новостей, карточек товаров или списков задач. Добавление нового элемента выполняется через метод add:

const newItem = document.createElement('div');
newItem.classList.add('item');
newItem.textContent = 'Новый элемент';
grid.add(newItem);
grid.layout(true); // обновление и анимация

Muuri автоматически вставит новый элемент на соответствующую позицию с вертикальным выравниванием.

Оглавление