Адаптивные галереи

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

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

Создание сетки начинается с простого HTML-контейнера:

<div class="grid-stack"></div>

Подключение Gridstack.js через npm или CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack/dist/gridstack.min.css" />
<script src="https://cdn.jsdelivr.net/npm/gridstack/dist/gridstack-h5.js"></script>

Инициализация сетки с базовыми параметрами:

const grid = GridStack.init({
  column: 12,        // Количество колонок
  margin: 10,        // Отступ между элементами
  float: true,       // Разрешает свободное перемещение элементов
  resizable: {       // Настройки изменения размеров
    handles: 'all'
  }
});

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

  • column — задаёт ширину сетки в колонках. В адаптивной галерее его можно изменять динамически через события resize.
  • float: true позволяет элементам «подниматься» в свободное пространство при удалении других элементов.
  • resizable.handles задаёт стороны, за которые пользователь может менять размеры элемента.

Добавление и управление виджетами

Элементы сетки (виджеты) создаются через JavaScript или напрямую в HTML:

grid.addWidget({
  x: 0,    // Колонка начала
  y: 0,    // Ряд начала
  w: 4,    // Ширина в колонках
  h: 2,    // Высота в рядах
  content: '<div class="widget">Элемент 1</div>'
});

Параметры виджета:

  • x, y — позиция на сетке.
  • w, h — размеры элемента в колонках и рядах.
  • id — уникальный идентификатор для последующего управления.
  • content — HTML-контент элемента.

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

const images = ['img1.jpg', 'img2.jpg', 'img3.jpg'];

images.forEach((src, index) => {
  grid.addWidget({
    x: index * 4 % 12,
    y: Math.floor(index / 3) * 2,
    w: 4,
    h: 2,
    content: `<img src="${src}" style="width:100%;height:100%;object-fit:cover;">`
  });
});

Адаптивность и отзывчивость

Gridstack.js автоматически поддерживает отзывчивость через breakpoints и события изменения размера окна. Для управления адаптивной галереей применяются два подхода:

  1. Изменение количества колонок в зависимости от ширины окна:
function adjustColumns() {
  const width = window.innerWidth;
  if(width < 600) grid.column(2);
  else if(width < 900) grid.column(4);
  else grid.column(12);
}

window.addEventListener('resize', adjustColumns);
adjustColumns();
  1. Перестроение виджетов при изменении сетки:
grid.engine.nodes.forEach(node => {
  node.w = Math.min(node.w, grid.getColumn());
});
grid.batchUpdate();
grid.commit();

Работа с событиями

Gridstack.js предоставляет мощные события для интерактивной адаптивной галереи:

  • change — вызывается при перемещении или изменении размера виджета.
  • added — при добавлении нового виджета.
  • removed — при удалении виджета.
  • resizestart / resizestop — начало и конец изменения размеров.
  • dragstart / dragstop — начало и конец перемещения.

Пример:

grid.on('change', (event, items) => {
  items.forEach(item => {
    console.log(`Элемент ${item.id} изменён: x=${item.x}, y=${item.y}, w=${item.w}, h=${item.h}`);
  });
});

Оптимизация адаптивной галереи

Для больших галерей важно учитывать производительность:

  • Batch update — группировка изменений:
grid.batchUpdate();
// Добавляем или меняем несколько виджетов
grid.commit();
  • Lazy loading изображений — загружать изображения по мере прокрутки.
  • Минимальные и максимальные размеры виджетов — предотвращение слишком маленьких или больших элементов:
grid.addWidget({
  w: 4, h: 2,
  minW: 2, minH: 1,
  maxW: 6, maxH: 4,
  content: '<div>Элемент</div>'
});

Стилизация виджетов и сетки

Для галерей особенно важна визуальная гармония:

.grid-stack {
  background: #f5f5f5;
}

.grid-stack-item {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.grid-stack-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

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

Gridstack.js поддерживает удаление и перемещение виджетов на лету:

const widget = grid.getNodeById('widget1');
grid.removeWidget(widget.el);

Можно также менять размеры или позицию:

grid.update(widget.el, { x: 2, y: 0, w: 6, h: 3 });

Интеграция с внешними данными

Для адаптивных галерей часто требуется загрузка контента с сервера:

fetch('/api/images')
  .then(res => res.json())
  .then(data => {
    data.forEach((img, idx) => {
      grid.addWidget({
        x: idx % 4 * 3,
        y: Math.floor(idx / 4) * 2,
        w: 3, h: 2,
        content: `<img src="${img.url}" alt="${img.title}">`
      });
    });
  });

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

Gridstack.js в комбинации с продуманной CSS-стилизацией и динамическими данными предоставляет полное решение для создания адаптивных, интерактивных галерей, которые одинаково удобно выглядят на мобильных устройствах, планшетах и десктопах.

Оглавление