Изменение параметров под разные разрешения

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

Использование медиазапросов для параметров сетки

Packery позволяет задавать конфигурацию сетки через объект опций при инициализации:

const grid = document.querySelector('.grid');
const pckry = new Packery(grid, {
  itemSelector: '.grid-item',
  gutter: 10,
  columnWidth: 100
});

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

function initializePackery() {
  let columnWidth;
  
  if (window.innerWidth >= 1200) {
    columnWidth = 150;
  } else if (window.innerWidth >= 768) {
    columnWidth = 120;
  } else {
    columnWidth = 80;
  }

  return new Packery('.grid', {
    itemSelector: '.grid-item',
    gutter: 10,
    columnWidth: columnWidth
  });
}

let pckry = initializePackery();

window.addEventListener('resize', () => {
  pckry.destroy();
  pckry = initializePackery();
});

Ключевой момент: при изменении размеров экрана старый экземпляр Packery нужно уничтожать с помощью метода destroy(), иначе элементы будут конфликтовать и сетка не будет перестраиваться корректно.

Динамическая подстройка размеров элементов

Иногда изменение только columnWidth недостаточно. Можно корректировать размеры самих элементов через CSS или через JS:

@media (max-width: 768px) {
  .grid-item {
    width: 80px;
    height: 80px;
  }
}

@media (min-width: 769px) and (max-width: 1199px) {
  .grid-item {
    width: 120px;
    height: 120px;
  }
}

@media (min-width: 1200px) {
  .grid-item {
    width: 150px;
    height: 150px;
  }
}

Packery автоматически учитывает размеры элементов при вызове layout():

pckry.layout();

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

Использование опции percentPosition

Для сеток, которые должны адаптироваться под ширину контейнера, рекомендуется использовать опцию percentPosition: true. Она переводит размеры колонок и отступов в проценты:

const pckry = new Packery('.grid', {
  itemSelector: '.grid-item',
  gutter: '.gutter-sizer',
  columnWidth: '.grid-sizer',
  percentPosition: true
});

В этом случае можно задавать размеры элементов через CSS в процентах, что упрощает поддержание адаптивности:

.grid-sizer { width: 25%; }
.grid-item { width: 25%; }

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

Перепроверка положения элементов после изменений

Если контент внутри элементов динамически меняет размер (например, картинки или текст), важно вызывать layout() после завершения загрузки:

imagesLoaded('.grid', function() {
  pckry.layout();
});

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

Настройка отступов и колонок под разные разрешения

Можно динамически изменять параметры gutter и columnWidth без полного уничтожения сетки, используя метод options и layout():

function updatePackeryOptions(pckryInstance) {
  if (window.innerWidth < 768) {
    pckryInstance.options.columnWidth = 80;
    pckryInstance.options.gutter = 5;
  } else {
    pckryInstance.options.columnWidth = 120;
    pckryInstance.options.gutter = 10;
  }
  pckryInstance.layout();
}

window.addEventListener('resize', () => updatePackeryOptions(pckry));

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

Комбинированный подход для сложных макетов

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

  • CSS медиазапросы для изменения размеров элементов;
  • Опцию percentPosition для адаптивной ширины;
  • Пересчёт сетки через layout() после динамических изменений;
  • Обработку события resize для подстройки колонок и отступов;
  • imagesLoaded для корректного размещения медиа-контента.

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

Выводы по адаптивной настройке

Packery обеспечивает гибкость через конфигурацию колонок, отступов и размеров элементов. Комбинируя медиазапросы, метод layout(), percentPosition и контроль загрузки контента, можно построить сетку, которая корректно перестраивается под любые разрешения, сохраняя эстетическое и функциональное качество интерфейса.

Оглавление