Галерея изображений

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

Grid в Muuri строится на основе контейнера и набора элементов, которые в него помещены. Каждый элемент может содержать любое DOM-содержимое — изображение, текст, кнопки и комбинации этих элементов.

const grid = new Muuri('.grid', {
  layout: {
    rounding: false
  },
  dragEnabled: true
});

В данном примере .grid — это CSS-класс контейнера, а layout.rounding: false обеспечивает точное позиционирование элементов без округления координат, что особенно важно при работе с изображениями различного размера.

Структура HTML галереи

Для корректной работы Muuri структура DOM должна быть упорядочена следующим образом:

<div class="grid">
  <div class="item">
    <div class="item-content">
      <img src="image1.jpg" alt="Описание изображения">
    </div>
  </div>
  <div class="item">
    <div class="item-content">
      <img src="image2.jpg" alt="Описание изображения">
    </div>
  </div>
  <!-- Дополнительные элементы -->
</div>
  • .grid — основной контейнер сетки.
  • .item — отдельный элемент сетки, который Muuri будет позиционировать и сортировать.
  • .item-content — обёртка содержимого, позволяющая применять стили и эффекты к изображению без нарушения работы сетки.

Настройка параметров Muuri

Muuri предоставляет множество опций, позволяющих гибко управлять поведением галереи:

  • layout — настройка расположения элементов.

    • fillGaps — заполняет пустые места при перемещении элементов.
    • horizontal — переключение между горизонтальной и вертикальной ориентацией сетки.

  • dragEnabled — разрешение на перетаскивание элементов.

  • dragSort — возможность сортировки при перетаскивании.

  • dragSortInterval — частота проверки пересечения элементов при перетаскивании.

  • dragContainer — контейнер, куда перемещается элемент во время drag & drop.

const grid = new Muuri('.grid', {
  dragEnabled: true,
  layout: {
    fillGaps: true
  },
  dragSort: true,
  dragSortInterval: 100
});

Фильтрация и сортировка изображений

Фильтрация позволяет скрывать элементы, не удовлетворяющие определённым критериям, без разрушения сетки. Например, скрытие изображений по тегу:

function filterCategory(category) {
  grid.filter(item => item.getElement().dataset.category === category);
}

Сортировка элементов выполняется с использованием функции sortBy, где можно сортировать по любому свойству:

grid.sort((a, b) => {
  const dateA = a.getElement().dataset.date;
  const dateB = b.getElement().dataset.date;
  return dateA - dateB;
});

Muuri автоматически плавно анимирует перемещение элементов после фильтрации или сортировки, создавая эффект живой динамической сетки.

Анимация и события

Muuri предоставляет встроенную систему анимации, которая управляет:

  • плавным перемещением элементов при изменении размеров контейнера;
  • анимацией при добавлении или удалении элементов;
  • обработкой событий drag & drop.

Примеры ключевых событий:

  • layoutStart и layoutEnd — запуск и завершение перестройки сетки.
  • dragStart, dragMove, dragEnd — события при перетаскивании.
  • filter — вызов при изменении фильтрации.
grid.on('dragEnd', (item) => {
  console.log('Элемент перемещён:', item.getElement());
});

Работа с изображениями разных размеров

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

  1. Использовать CSS для ограничения максимальной ширины и высоты изображений.
  2. Оборачивать изображения в контейнер .item-content, чтобы применять padding и border без нарушения сетки.
.item-content img {
  display: block;
  max-width: 100%;
  height: auto;
}
  1. Вызывать метод grid.refreshItems().layout() после динамического добавления изображений для корректного обновления сетки.
const newItem = document.createElement('div');
newItem.className = 'item';
newItem.innerHTML = `<div class="item-content"><img src="new.jpg"></div>`;
grid.add(newItem);
grid.refreshItems().layout();

Интеграция с lazy-loading и responsive

Muuri хорошо интегрируется с ленивой загрузкой изображений. После загрузки нового изображения рекомендуется обновлять сетку:

const img = new Image();
img.src = 'image-lazy.jpg';
img.onl oad = () => {
  grid.refreshItems().layout();
};

Для адаптивных сеток можно использовать медиазапросы или событие window.resize:

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

Добавление кастомных эффектов

Muuri позволяет применять CSS-анимации и transition при движении элементов. Например, эффект масштабирования при наведении:

.item-content {
  transition: transform 0.3s ease;
}
.item-content:hover {
  transform: scale(1.05);
}

Muuri при этом будет корректно учитывать новые размеры при layout и drag & drop.

Динамическое управление элементами

Элементы можно динамически добавлять, удалять и перемещать внутри сетки:

  • add(items, options) — добавление новых элементов.
  • remove(items, options) — удаление элементов с анимацией.
  • move(item, index, options) — перемещение элемента на другую позицию.
grid.remove([item], { removeElements: true });
grid.add([newItem], { index: 0 });

Использование этих методов позволяет создавать интерактивные галереи с изменяемым контентом без перезагрузки страницы.

Заключение

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

Оглавление