appended

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

Подключение Masonry

Для начала необходимо подключить библиотеку. Наиболее распространённые способы:

<!-- CDN -->
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

Или через npm:

npm install masonry-layout

Затем импортируется в проект:

import Masonry from 'masonry-layout';

Инициализация сетки

Создание Masonry-сетки осуществляется через конструктор с передачей контейнера и параметров:

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

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

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

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

Работа с добавлением элементов

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

// Создание нового элемента
const newItem = document.createElement('div');
newItem.classList.add('grid-item');
newItem.innerHTML = '<img src="example.jpg" alt="Example">';

// Добавление в контейнер
grid.appendChild(newItem);

// Информирование Masonry о новом элементе
masonry.appended(newItem);

Особенности метода appended:

  1. Masonry учитывает новые элементы и пересчитывает позиции всех блоков.
  2. Можно передавать один элемент или массив элементов.
  3. После добавления новых элементов рекомендуется использовать imagesLoaded для корректного размещения, если внутри есть изображения:
imagesLoaded(grid, function() {
  masonry.appended(newItem);
});

Обработка массивов элементов

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

const items = [];

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

masonry.appended(items);

Передача массива ускоряет перестроение сетки, так как Masonry выполняет пересчёт один раз для всех новых блоков.

Интеграция с асинхронной загрузкой

Для работы с динамическим контентом, загружаемым через API или AJAX, структура остаётся аналогичной:

fetch('/api/items')
  .then(response => response.json())
  .then(data => {
    const elements = data.map(itemData => {
      const el = document.createElement('div');
      el.classList.add('grid-item');
      el.innerHTML = `<img src="${itemData.image}" alt="${itemData.title}">`;
      grid.appendChild(el);
      return el;
    });

    imagesLoaded(grid, function() {
      masonry.appended(elements);
    });
  });

Анимации и плавный переход

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

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

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

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

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

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

Использование layout() после remove() гарантирует корректное перераспределение оставшихся элементов.

Комбинирование appended с prepend

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

grid.insertBefore(newItem, grid.firstChild);
masonry.prepended(newItem);

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

Выводы по использованию appended

  • appended незаменим для динамически растущих сеток.
  • Работает с одиночными элементами и массивами.
  • Для изображений рекомендуется использовать imagesLoaded для точного позиционирования.
  • Поддерживает CSS-анимации без дополнительного кода.
  • Легко комбинируется с методами remove и prepended для полного контроля над сеткой.

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

Оглавление