Мобильная оптимизация

Packery — это библиотека для динамической верстки, которая позволяет располагать элементы сетки в «плиточном» стиле, адаптируя их под размеры контейнера. Для мобильных устройств особое значение приобретает адаптивность: элементы должны корректно перестраиваться при изменении ширины экрана, сохраняя плотное размещение без пустых промежутков.

Настройка контейнера для мобильных устройств

Основной контейнер Packery задается через:

var grid = document.querySelector('.grid');
var pckry = new Packery(grid, {
  itemSelector: '.grid-item',
  gutter: 10
});
  • itemSelector — класс элементов сетки.
  • gutter — расстояние между элементами. Для мобильных устройств рекомендуется уменьшать отступы, например, до 5px.

Использование медиа-запросов CSS позволяет динамически менять размеры контейнера и элементов под разные ширины экранов:

.grid-item {
  width: 200px;
}

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

Реакция Packery на изменение размеров экрана

Packery не перестраивает сетку автоматически при изменении размеров контейнера. Для корректной мобильной оптимизации необходимо вызвать метод layout() при ресайзе окна:

window.addEventListener('resize', function() {
  pckry.layout();
});
  • Этот вызов гарантирует, что элементы будут пересчитаны и выстроены по плотной сетке после изменения ширины экрана.
  • Для повышения производительности стоит использовать throttle или debounce, чтобы метод не срабатывал слишком часто при постоянном изменении размеров:
function debounce(fn, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(fn, delay);
  };
}

window.addEventListener('resize', debounce(function() {
  pckry.layout();
}, 150));

Адаптивные размеры элементов

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

function updateGridItems() {
  var width = window.innerWidth;
  var itemWidth;

  if (width < 480) itemWidth = 100;
  else if (width < 768) itemWidth = 150;
  else itemWidth = 200;

  var items = document.querySelectorAll('.grid-item');
  items.forEach(function(item) {
    item.style.width = itemWidth + 'px';
  });

  pckry.layout();
}

window.addEventListener('resize', updateGridItems);
updateGridItems();
  • Такой подход обеспечивает оптимальное использование пространства на любых устройствах.
  • Комбинируя с CSS-свойствами max-width и min-width, можно предотвратить чрезмерное сжатие или растяжение элементов.

Управление порядком элементов на мобильных устройствах

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

// Сортировка элементов по атрибуту data-priority
var items = Array.from(grid.children);
items.sort(function(a, b) {
  return a.dataset.priority - b.dataset.priority;
});
items.forEach(function(item) {
  grid.appendChild(item);
});

pckry.reloadItems();
pckry.layout();
  • reloadItems() сообщает Packery о том, что DOM изменился.
  • layout() перестраивает сетку после изменения порядка элементов.

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

Packery корректно размещает элементы после загрузки контента, но изображения могут влиять на высоту элементов. Для мобильной оптимизации важно использовать imagesLoaded:

imagesLoaded(grid, function() {
  pckry.layout();
});
  • Это предотвращает проблемы с неправильным расположением элементов до полной загрузки изображений.
  • Особенно важно на мобильных устройствах с медленным интернет-соединением.

Интерактивность и тач-события

Для мобильных версий часто применяют перетаскивание элементов (draggable), что поддерживается совместно с Packery и библиотекой Draggabilly:

var draggies = [];
pckry.getItemElements().forEach(function(itemElem) {
  var draggie = new Draggabilly(itemElem);
  pckry.bindDraggabillyEvents(draggie);
  draggies.push(draggie);
});
  • Draggabilly корректно работает на тач-устройствах, что позволяет изменять порядок элементов напрямую пользователю.
  • Комбинирование с адаптивной шириной элементов сохраняет плавность интерфейса.

Итоговые рекомендации по мобильной оптимизации

  • Использовать медиа-запросы и динамическое изменение ширины элементов.
  • Обеспечивать вызов layout() при изменении размеров окна с использованием debounce/throttle.
  • Загружать изображения через imagesLoaded для корректного построения сетки.
  • Для интерактивности применять Draggabilly с учетом тач-событий.
  • При необходимости изменять порядок элементов для улучшения UX на мобильных устройствах.

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

Оглавление