reloadItems

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

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

Синтаксис

masonryInstance.reloadItems()

Метод вызывается у уже созданного экземпляра Masonry.

Пример инициализации:

var grid = document.querySelector('.grid');

var msnry = new Masonry(grid, {
  itemSelector: '.grid-item',
  columnWidth: 200,
  gutter: 10
});

Перезагрузка элементов:

msnry.reloadItems();

После вызова Masonry заново определяет все элементы .grid-item внутри контейнера .grid.

Что происходит внутри Masonry

Когда создаётся экземпляр Masonry, выполняется несколько шагов:

  1. Получение DOM-элемента контейнера.
  2. Поиск всех элементов, соответствующих itemSelector.
  3. Создание внутреннего массива элементов.
  4. Создание объектов Item для каждого найденного элемента.
  5. Расчёт позиций.

Метод reloadItems повторяет второй, третий и четвёртый шаг.

Процесс можно представить следующим образом:

DOM контейнера
      ↓
Поиск элементов itemSelector
      ↓
Очистка текущего массива items
      ↓
Создание новых объектов Item
      ↓
Обновление внутренней структуры Masonry

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

Связка reloadItems() и layout()

На практике reloadItems почти всегда используется вместе с методом layout.

Пример:

msnry.reloadItems();
msnry.layout();

Порядок вызовов важен:

  1. reloadItems() — обновляет список элементов
  2. layout() — пересчитывает позиции

Без вызова layout новые элементы будут зарегистрированы, но их координаты не будут пересчитаны.

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

Метод применяется в нескольких типичных сценариях.

Изменение структуры DOM

Если элементы были добавлены в контейнер напрямую через DOM API:

var newItem = document.createElement('div');
newItem.classList.add('grid-item');

grid.appendChild(newItem);

После этого Masonry не узнаёт автоматически о новом элементе.

Необходимо:

msnry.reloadItems();
msnry.layout();

Массовое изменение DOM

reloadItems особенно полезен при массовых изменениях:

  • динамическая генерация элементов
  • замена контента контейнера
  • обновление шаблона

Пример:

grid.innerHTML = generateItems();

msnry.reloadItems();
msnry.layout();

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

Удаление элементов

При удалении элементов из DOM Masonry продолжает хранить их во внутреннем массиве. Это может привести к некорректным расчётам.

Пример удаления:

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

После удаления:

msnry.reloadItems();
msnry.layout();

Отличие reloadItems от addItems

reloadItems часто путают с методом addItems.

reloadItems

Полностью пересканирует контейнер.

DOM → полный список элементов

addItems

Добавляет только новые элементы в существующий массив.

существующие элементы + новые элементы

Пример использования addItems:

var items = grid.querySelectorAll('.grid-item.new');

msnry.addItems(items);
msnry.layout();

Сравнение методов

Метод Поведение
reloadItems Полная пересборка списка элементов
addItems Добавление конкретных элементов
remove Удаление элементов из Masonry

reloadItems используется тогда, когда проще пересобрать список, чем отслеживать изменения вручную.

Работа с внутренними объектами Item

Каждый элемент Masonry представлен объектом Item.

Внутренне структура выглядит так:

msnry.items = [
  Item,
  Item,
  Item
];

Метод reloadItems:

  1. очищает msnry.items
  2. создаёт новые Item
  3. связывает их с DOM-элементами

Псевдокод внутренней логики:

reloadItems() {
  this.items = this._itemize(this.element.children);
}

Метод _itemize преобразует DOM-элементы в объекты Item.

Поведение с itemSelector

reloadItems использует значение itemSelector, указанное при инициализации Masonry.

Пример:

var msnry = new Masonry('.grid', {
  itemSelector: '.card'
});

При вызове reloadItems Masonry выполнит:

container.querySelectorAll('.card')

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

Пример динамической галереи

HTML:

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

Jav * aScript:

var grid = document.querySelector('.grid');

var msnry = new Masonry(grid, {
  itemSelector: '.grid-item',
  columnWidth: 200,
  gutter: 10
});

Добавление элементов:

for (let i = 0; i < 5; i++) {
  let item = document.createElement('div');
  item.className = 'grid-item';
  grid.appendChild(item);
}

msnry.reloadItems();
msnry.layout();

После выполнения:

  • Masonry заново считывает элементы
  • обновляет внутренний список
  • пересчитывает расположение

Производительность

reloadItems выполняет полный перескан DOM контейнера. При большом количестве элементов это может быть дорогостоящей операцией.

Пример нагрузки:

Количество элементов Влияние
50 практически незаметно
200 лёгкая задержка
1000+ заметная нагрузка

Поэтому при работе с большим количеством элементов рекомендуется:

  • использовать addItems
  • использовать remove
  • минимизировать количество вызовов reloadItems

Типичный шаблон использования

Наиболее распространённая схема работы выглядит следующим образом:

function refreshMasonry() {
  msnry.reloadItems();
  msnry.layout();
}

Вызов после обновления DOM:

updateContent();
refreshMasonry();

Работа с фреймворками

При использовании React, Vue или Angular DOM может обновляться автоматически. Masonry не отслеживает эти изменения.

Поэтому после рендера необходимо вызывать:

msnry.reloadItems();
msnry.layout();

В React это обычно делается после обновления компонента.

Частая ошибка

Распространённая ошибка — ожидание, что reloadItems автоматически обновит расположение.

Неправильно:

msnry.reloadItems();

Элементы обновятся во внутреннем списке, но их позиции могут остаться прежними.

Правильно:

msnry.reloadItems();
msnry.layout();

Использование после фильтрации элементов

При фильтрации элементов через изменение DOM можно использовать reloadItems.

Пример:

var items = document.querySelectorAll('.grid-item');

items.forEach(function(item) {
  if (!item.classList.contains('active')) {
    item.remove();
  }
});

msnry.reloadItems();
msnry.layout();

Masonry заново построит сетку только из оставшихся элементов.

Комбинация с imagesLoaded

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

Типичная схема:

imagesLoaded(grid, function() {
  msnry.reloadItems();
  msnry.layout();
});

Это предотвращает неправильные расчёты размеров.

Основные свойства, затрагиваемые reloadItems

После вызова метода обновляются следующие структуры:

  • msnry.items
  • Item.element
  • Item.size

При этом не изменяются:

  • настройки Masonry
  • размеры колонок
  • параметры gutter
  • конфигурация columnWidth

Метод влияет только на список элементов сетки.

Краткая схема работы

reloadItems()
     ↓
очистка массива items
     ↓
поиск DOM элементов
     ↓
создание объектов Item
     ↓
обновление структуры Masonry
     ↓
layout() (отдельный вызов)
     ↓
пересчёт позиций
Оглавление