reloadItems

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

Основной синтаксис

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

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

После вызова reloadItems необходимо вызвать метод layout() для перерасчёта положения элементов в сетке:

pckry.reloadItems();
pckry.layout();

Когда используется reloadItems

Метод актуален в случаях, когда DOM внутри контейнера изменяется динамически:

  1. Добавление новых элементов
var grid = document.querySelector('.grid');
var item = document.createElement('div');
item.className = 'grid-item';
grid.appendChild(item);

pckry.reloadItems();
pckry.layout();
  1. Удаление элементов
var itemToRemove = document.querySelector('.grid-item:last-child');
grid.removeChild(itemToRemove);

pckry.reloadItems();
pckry.layout();
  1. Изменение существующих элементов Если размеры элементов изменяются после загрузки (например, динамический контент или изображения), метод гарантирует, что Packery учтёт новые размеры.

Важные нюансы использования

  • reloadItems не пересчитывает позиции элементов автоматически, поэтому всегда следует вызывать layout() после обновления элементов.
  • Метод пересобирает внутренний массив элементов (_getItems), что может быть ресурсоёмко при больших сетках, поэтому не рекомендуется вызывать его слишком часто, особенно в циклах.
  • Если элементы были добавлены через метод appended или удалены через remove, иногда reloadItems не нужен, так как эти методы уже корректно обновляют внутреннюю структуру сетки.

Пример динамического обновления сетки

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

// Функция добавления элемента с анимацией
function addItem(content) {
  var item = document.createElement('div');
  item.className = 'grid-item';
  item.textContent = content;
  grid.appendChild(item);

  pckry.reloadItems();
  pckry.layout();
}

// Функция удаления элемента
function removeLastItem() {
  var lastItem = grid.querySelector('.grid-item:last-child');
  if (lastItem) {
    grid.removeChild(lastItem);
    pckry.reloadItems();
    pckry.layout();
  }
}

Различие между reloadItems и appended/prepended

  • reloadItems — полностью пересоздаёт внутренний массив элементов, подходящий для комплексных изменений.
  • appended / prepended — добавляют элементы в сетку без пересоздания всех элементов, что быстрее при небольших вставках.
// Быстрое добавление без полного пересчёта
var newItem = document.createElement('div');
newItem.className = 'grid-item';
grid.appendChild(newItem);
pckry.appended(newItem); // обновление только для нового элемента
pckry.layout();

Советы по производительности

  • Использовать reloadItems только после значительных изменений DOM.
  • Для массового добавления/удаления элементов комбинировать appended/remove с layout().
  • Избегать вызова reloadItems на каждом событии изменения содержимого элемента; вместо этого собирать изменения и вызывать метод один раз после всех модификаций.

Итоговое использование

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

Правильная комбинация reloadItems с layout, appended и remove позволяет создавать гибкие и производительные сетки, способные адаптироваться к динамическому контенту и изменяющимся условиям интерфейса.

Оглавление