Показ и скрытие элементов

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

Скрытие элементов

Чтобы скрыть элемент, необходимо не только изменить его CSS-свойство display или visibility, но и уведомить Packery о том, что элемент больше не участвует в раскладке.

Пример:

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

var item = document.querySelector('.grid-item.hidden');

// Скрытие элемента
item.style.display = 'none';

// Удаление элемента из раскладки Packery
pckry.remove(item);

// Перестройка сетки после удаления
pckry.layout();

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

display: none полностью убирает элемент из DOM-визуализации. Packery при этом не видит элемент, пока его не добавить обратно.
Метод remove() удаляет элемент из внутренних данных Packery, чтобы при последующей перестройке сетки он не учитывался.
layout() гарантирует перерасчет положения оставшихся элементов.

Показ элементов

Если элемент был скрыт и удалён из сетки, чтобы вернуть его обратно, необходимо добавить его снова и обновить раскладку.

Пример:

// Отображение элемента
item.style.display = 'block';

// Добавление в сетку Packery
pckry.appended(item);

// Перестройка сетки
pckry.layout();

Особенности:

Метод appended() уведомляет Packery о новых элементах в DOM, которые нужно учесть в раскладке.
layout() пересчитывает позиции всех элементов, чтобы сетка оставалась оптимальной.

Плавное появление и исчезновение

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

Пример с переходами:

.grid-item {
  transition: transform 0.4s, opacity 0.4s;
  opacity: 1;
}

.grid-item.hidden {
  opacity: 0;
  transform: scale(0.5);
}

// Плавное скрытие
item.classList.add('hidden');

setTimeout(function() {
  item.style.display = 'none';
  pckry.remove(item);
  pckry.layout();
}, 400);

// Плавное появление
item.style.display = 'block';
setTimeout(function() {
  item.classList.remove('hidden');
  pckry.appended(item);
  pckry.layout();
}, 50);

Важно:

CSS-класс hidden управляет визуальными свойствами, а display: none управляет участием в раскладке.
Таймер нужен для того, чтобы завершить анимацию перед удалением элемента из Packery.

Фильтрация элементов

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

Пример фильтрации:

function filterItems(category) {
  var items = grid.querySelectorAll('.grid-item');

  items.forEach(function(item) {
    if (!item.classList.contains(category)) {
      item.style.display = 'none';
      pckry.remove(item);
    } else {
      item.style.display = 'block';
      pckry.appended(item);
    }
  });

  pckry.layout();
}

Примечания:

Такой подход комбинирует методы remove() и appended() с динамическим управлением CSS.
После каждого изменения необходимо вызывать layout(), иначе сетка будет отображать пустые пространства.

Массовое управление видимостью

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

var hiddenItems = grid.querySelectorAll('.grid-item.hidden');
pckry.remove(hiddenItems);
pckry.layout();

var visibleItems = grid.querySelectorAll('.grid-item.visible');
pckry.appended(visibleItems);
pckry.layout();

Особенности производительности:

Packery эффективнее обрабатывает несколько элементов за один вызов remove() или appended(), чем по отдельности.
Минимизирует количество пересчетов сетки и лишних перерисовок DOM.