Динамическое изменение количества колонок

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

Настройка исходной сетки

При инициализации сетки количество колонок задаётся через опцию column:

const grid = GridStack.init({
  column: 12,
  float: true,
  animate: true
});
  • column — количество колонок сетки по умолчанию.
  • float — разрешает свободное смещение виджетов при переносе.
  • animate — добавляет анимацию при перемещении элементов.

Каждая ячейка сетки (grid item) при этом получает ширину, рассчитанную автоматически исходя из числа колонок.

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

Gridstack.js предоставляет метод column() для динамического изменения количества колонок после инициализации:

grid.column(8); // изменяем сетку на 8 колонок

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

Важно понимать, что:

  • Если новое количество колонок меньше текущего, виджеты могут уменьшаться в ширине, или переноситься на новые строки.
  • Если колонок становится больше, ширина виджетов увеличивается пропорционально.

Использование адаптивных сеток

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

function updateColumns() {
  const width = window.innerWidth;
  if (width < 600) grid.column(2);
  else if (width < 900) grid.column(4);
  else grid.column(12);
}

window.addEventListener('resize', updateColumns);
updateColumns();

Здесь количество колонок меняется автоматически при изменении ширины окна. При этом Gridstack.js корректно перераспределяет виджеты, предотвращая наложение элементов.

Сохранение и восстановление состояния сетки

При динамическом изменении колонок часто важно сохранять позиции виджетов. Gridstack.js поддерживает методы save() и load():

const serializedData = grid.save(); // сохраняем текущее состояние

grid.column(6); // меняем количество колонок

grid.load(serializedData); // восстанавливаем позиции с учётом новых колонок

Метод load() автоматически масштабирует позиции и размеры элементов в соответствии с новой конфигурацией колонок.

Особенности при использовании auto и resizable

Если сетка использует auto-ширину или элементы имеют возможность изменения размеров:

  • Методы column() и resize() работают совместно, корректируя размеры виджетов.
  • Для предотвращения конфликтов стоит использовать grid.compact() после изменения колонок, чтобы убрать пустые промежутки.
grid.column(10);
grid.compact();

compact() перераспределяет виджеты по сетке, минимизируя пустое пространство.

Практические советы по динамическим колонкам

  1. Сохранять исходные размеры виджетов: рекомендуется хранить исходные w и h каждого элемента для корректного масштабирования.
  2. Использовать события Gridstack.js: change и resizestop позволяют отслеживать изменения и сохранять состояние.
  3. Проверять перенос элементов: при уменьшении количества колонок важно убедиться, что виджеты не накладываются друг на друга.
grid.on('change', function(event, items) {
  console.log('Состояние изменилось', items);
});
  1. Совместимость с CSS: сетка должна быть в контейнере с width: 100%, чтобы автоматическое перераспределение работало корректно.

Пример интеграции с адаптивной версткой

const grid = GridStack.init({
  column: 12,
  float: true
});

window.addEventListener('resize', () => {
  const width = document.body.clientWidth;
  if (width < 480) grid.column(1);
  else if (width < 768) grid.column(3);
  else if (width < 1024) grid.column(6);
  else grid.column(12);
});

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

Итоговая структура управления колонками

  1. Инициализация сетки с базовым количеством колонок.
  2. Динамическая смена количества колонок через grid.column(newValue).
  3. Сохранение и восстановление состояния виджетов при необходимости.
  4. Использование compact() для оптимального распределения.
  5. Связывание изменения колонок с размером окна для адаптивности.

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

Оглавление