Отключение адаптивности

Библиотека Packery реализует динамическое позиционирование элементов сетки, автоматически подстраивая их под размеры контейнера и соседние блоки. По умолчанию Packery работает адаптивно: при изменении ширины контейнера элементы перестраиваются, чтобы заполнить доступное пространство оптимальным образом. В некоторых случаях требуется фиксированная компоновка, где элементы остаются на своих местах независимо от изменений ширины окна. Для этого используется отключение адаптивности.

Основные параметры, влияющие на адаптивность

  1. percentPosition Этот параметр определяет, будут ли размеры и позиции элементов вычисляться в процентах относительно контейнера. Если выставлено true, сетка становится гибкой и адаптируется к размеру родителя. Для отключения адаптивности необходимо использовать false или опустить этот параметр, чтобы позиции задавались в пикселях.

    var grid = new Packery('.grid', {
  itemSelector: '.grid-item',
  gutter: 10,
  percentPosition: false
});

    Важно: при отключении percentPosition размеры элементов должны быть заданы через CSS в пикселях.

  2. columnWidth Задает ширину столбца сетки. Для фиксированной компоновки рекомендуется использовать точное значение в пикселях, а не ссылку на элемент или проценты:

    var grid = new Packery('.grid', {
  itemSelector: '.grid-item',
  columnWidth: 200
});

    Это позволяет Packery создавать неизменяемую сетку с фиксированной шириной колонок, не реагирующую на изменение размера окна.

  3. resize Этот флаг определяет, будет ли Packery реагировать на события изменения окна. По умолчанию он включен (true). Для полной фиксации расположения элементов его нужно отключить:

    var grid = new Packery('.grid', {
  itemSelector: '.grid-item',
  resize: false
});

    При resize: false перестройка сетки не происходит при изменении ширины окна, что полностью отключает адаптивность.

Пример полной конфигурации с отключенной адаптивностью

var grid = new Packery('.grid', {
  itemSelector: '.grid-item',
  columnWidth: 150,
  gutter: 10,
  percentPosition: false,
  resize: false
});

Объяснение параметров:

  • itemSelector – CSS-селектор элементов сетки.
  • columnWidth – фиксированная ширина колонок в пикселях.
  • gutter – расстояние между элементами.
  • percentPosition – отключает вычисление размеров в процентах.
  • resize – запрещает перестройку сетки при изменении окна.

Важные нюансы при отключении адаптивности

  • Статичная сетка не подстраивается под контент. Если элементы имеют разные размеры, они могут выходить за пределы контейнера или оставлять пустые промежутки. Для контроля необходимо тщательно задавать размеры элементов через CSS.
  • Фиксированные колонки лучше комбинировать с gutter в пикселях, чтобы сохранялась ровная структура сетки.
  • Перестройка элементов возможна вручную через метод layout():
grid.layout();

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

  • Совместимость с изображениями. Если элементы содержат изображения, необходимо использовать imagesLoaded, чтобы гарантировать правильную компоновку:
imagesLoaded('.grid', function() {
  grid.layout();
});

Без этого сетка может неправильно рассчитать позиции, так как Packery учитывает размеры элементов во время инициализации.

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

Отключение адаптивности актуально для следующих случаев:

  • Статичные макеты с фиксированными блоками и жесткими размерами.
  • Интерфейсы, где важна точная позиция каждого элемента (например, дизайнерские панно, пиксельная графика).
  • Проекты, где контроль над сеткой важнее гибкости и подстраивания под разные устройства.

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

Методы управления после отключения адаптивности

  1. appended(items) – добавляет новые элементы в сетку, без автоподстройки всей сетки.
  2. prepended(items) – добавляет элементы в начало, позиции существующих блоков остаются прежними.
  3. remove(items) – удаляет элементы, не меняя расположение остальных.
  4. layout() – принудительная перестройка сетки после любых изменений, если это необходимо.

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

Оглавление