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

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

const grid = document.querySelector('.grid');
const masonry = new Masonry(grid, {
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  percentPosition: true,
  gutter: 10
});

Ключевые параметры:

  • itemSelector – CSS-класс элементов сетки, которые Masonry будет позиционировать.
  • columnWidth – ширина колонки. Может быть числом или CSS-селектором.
  • percentPosition – если true, Masonry использует проценты, что облегчает адаптивное расположение.
  • gutter – расстояние между элементами.

Добавление новых элементов динамически

Для динамического добавления элементов важно корректно вставить DOM-узлы и уведомить Masonry о появлении новых блоков. Простейший способ:

const newItem = document.createElement('div');
newItem.classList.add('grid-item');
newItem.innerHTML = 'Новый элемент';
grid.appendChild(newItem);
masonry.appended(newItem);

Метод appended сообщает Masonry, что в контейнер добавлен новый элемент, и пересчитывает расположение сетки. Без этого новые блоки могут появляться некорректно.

Добавление нескольких элементов одновременно

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

const elements = [];
for (let i = 0; i < 5; i++) {
  const item = document.createElement('div');
  item.classList.add('grid-item');
  item.textContent = `Элемент ${i + 1}`;
  elements.push(item);
  grid.appendChild(item);
}
masonry.appended(elements);

Метод appended принимает как один элемент, так и массив элементов, что значительно ускоряет процесс при массовом обновлении сетки.

Интеграция с изображениями

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

const img = new Image();
img.src = 'image.jpg';
img.onl oad = function() {
  const item = document.createElement('div');
  item.classList.add('grid-item');
  item.appendChild(img);
  grid.appendChild(item);
  masonry.appended(item);
};

Для множественных изображений часто применяют библиотеку imagesLoaded, которая гарантирует, что Masonry пересчитает сетку только после полной загрузки изображений:

imagesLoaded(grid, function() {
  masonry.layout();
});

Использование метода prepended для добавления сверху

Иногда требуется вставить элемент в начало сетки, а не в конец. Для этого используется метод prepended:

const newItemTop = document.createElement('div');
newItemTop.classList.add('grid-item');
newItemTop.textContent = 'Элемент сверху';
grid.insertBefore(newItemTop, grid.firstChild);
masonry.prepended(newItemTop);

Этот метод корректно пересчитает расположение всех элементов, сдвинув существующие вниз.

Обновление и перестройка сетки

После добавления элементов может потребоваться полное обновление сетки, особенно если были изменены размеры существующих блоков:

masonry.reloadItems();
masonry.layout();
  • reloadItems() – пересобирает внутренний массив элементов, которые Masonry отслеживает.
  • layout() – пересчитывает и перестраивает сетку с учетом текущих размеров элементов.

Анимации при добавлении элементов

Для плавного появления новых элементов можно использовать CSS-анимации вместе с Masonry. В CSS задаются свойства:

.grid-item {
  opacity: 0;
  transform: scale(0.9);
  transition: all 0.3s ease;
}

.grid-item.is-visible {
  opacity: 1;
  transform: scale(1);
}

И в Jav * aScript:

const item = document.createElement('div');
item.classList.add('grid-item');
item.textContent = 'Появляющийся элемент';
grid.appendChild(item);
imagesLoaded(item, function() {
  masonry.appended(item);
  item.classList.add('is-visible');
});

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

Оптимизация производительности при массовом добавлении

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

  1. Создавать элементы в DocumentFragment, чтобы минимизировать перерисовку DOM.
  2. Использовать метод appended один раз для всех элементов.
  3. Вызывать layout() только после вставки всех блоков.

Пример с DocumentFragment:

const fragment = document.createDocumentFragment();
const items = [];
for (let i = 0; i < 20; i++) {
  const item = document.createElement('div');
  item.classList.add('grid-item');
  item.textContent = `Элемент ${i+1}`;
  fragment.appendChild(item);
  items.push(item);
}
grid.appendChild(fragment);
masonry.appended(items);

Это значительно снижает нагрузку на браузер при работе с большими сетками.

Управление удалением и заменой элементов

Добавление новых элементов часто сопровождается удалением старых. Masonry предоставляет методы для удаления и повторного добавления:

masonry.remove(element);
grid.removeChild(element);
masonry.layout();

Удаление элемента из DOM без вызова remove нарушает подсчёт Masonry, поэтому порядок действий важен: сначала уведомляем библиотеку, затем удаляем из DOM и перестраиваем сетку.

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

Оглавление