Добавление в конец

Для использования Masonry необходимо подключить библиотеку в проект. Обычно это делается через CDN или установку через npm/yarn. После подключения создаётся экземпляр Masonry, указывающий контейнер с элементами и настройки расположения. Пример базовой инициализации:

const grid = document.querySelector('.grid');
const msnry = new Masonry(grid, {
  itemSelector: '.grid-item',
  columnWidth: 200,
  gutter: 10
});
  • itemSelector — CSS-селектор для элементов сетки.
  • columnWidth — ширина колонок в пикселях или в процентах.
  • gutter — промежуток между элементами.

Инициализация создаёт начальное расположение всех элементов, но не обрабатывает динамически добавленные.

Добавление элементов в конец сетки

Чтобы добавить новые элементы в конец Masonry-сетки, необходимо выполнить несколько шагов:

  1. Создать HTML-элемент или несколько элементов.
  2. Вставить их в DOM-контейнер сетки.
  3. Сообщить Masonry о новых элементах через метод appended.

Пример:

// 1. Создание нового элемента
const newItem = document.createElement('div');
newItem.classList.add('grid-item');
newItem.innerHTML = '<p>Новый элемент</p>';

// 2. Добавление в DOM
grid.appendChild(newItem);

// 3. Обновление Masonry
msnry.appended(newItem);

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

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

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

const items = [];

for (let i = 0; i < 5; i++) {
  const item = document.createElement('div');
  item.classList.add('grid-item');
  item.innerHTML = `<p>Элемент ${i + 1}</p>`;
  grid.appendChild(item);
  items.push(item);
}

msnry.appended(items);

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

Обновление размеров и перекомпозиция

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

msnry.appended(newItem);
msnry.layout();

Метод layout пересчитывает позиции всех элементов с учётом новых размеров, что предотвращает наложение или пустые промежутки в сетке.

Использование изображений внутри новых элементов

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

imagesLoaded(newItem, function() {
  msnry.appended(newItem);
  msnry.layout();
});

Для нескольких элементов:

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

Это гарантирует корректное отображение всех изображений и правильное расположение элементов.

Добавление элементов с анимацией

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

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

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

Отслеживание добавленных элементов

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

msnry.on('appendComplete', function(addedItems) {
  console.log('Добавлены элементы:', addedItems);
});

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

Практические рекомендации

  • Для больших массивов элементов добавлять их пакетами, чтобы избежать перерасчета всей сетки каждый раз.
  • Если элементы имеют разную высоту, лучше заранее задавать минимальные размеры для ускорения компоновки.
  • Использовать imagesLoaded, чтобы изображения не ломали сетку.
  • Для плавного визуального эффекта использовать CSS-переходы совместно с append и layout.

Добавление элементов в конец Masonry — это прямой и эффективный способ динамически расширять сетку без полной перестройки, сохраняя производительность и аккуратное визуальное оформление.

Оглавление