prepended

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

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

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

var grid = document.querySelector('.grid');
var msnry = new Masonry(grid, {
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  percentPosition: true
});

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

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

Основной метод prepended

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

Синтаксис:

msnry.prepended(newElements);
  • newElements — одиночный элемент или коллекция элементов (NodeList, массив или jQuery-объект).
  • После вызова prepended Masonry автоматически пересчитывает позиции всех элементов, включая новые.

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

Новые элементы обычно создаются динамически и сразу добавляются в DOM. Пример с использованием чистого Jav * aScript:

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

// Создание нового элемента
var item = document.createElement('div');
item.className = 'grid-item';
item.textContent = 'Новый элемент';

// Вставка в DOM перед первым элементом
grid.insertBefore(item, grid.firstChild);

// Обновление Masonry
msnry.prepended(item);

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

var newItems = [];
for (var i = 0; i < 5; i++) {
  var item = document.createElement('div');
  item.className = 'grid-item';
  item.textContent = 'Элемент ' + (i + 1);
  grid.insertBefore(item, grid.firstChild);
  newItems.push(item);
}
msnry.prepended(newItems);

Взаимодействие с изображениями

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

<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>

Пример интеграции:

imagesLoaded(grid, function() {
  var newItem = document.createElement('div');
  newItem.className = 'grid-item';
  newItem.innerHTML = '<img src="image.jpg">';
  
  grid.insertBefore(newItem, grid.firstChild);
  msnry.prepended(newItem);
});

Это гарантирует, что сетка не сломается из-за не загруженных изображений.

Обновление и пересчёт

После добавления элементов с prepended Masonry автоматически обновляет сетку. Дополнительно можно вызвать методы:

  • msnry.layout() — пересчитывает позиции всех элементов.
  • msnry.reloadItems() — пересчитывает список элементов, полезно при динамическом изменении DOM.

Пример комбинирования:

msnry.prepended(newItem);
msnry.layout();

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

  1. Группировка добавлений: добавлять несколько элементов одновременно эффективнее, чем по одному.
  2. Использование documentFragment: позволяет вставлять элементы в DOM единожды, а не по отдельности.
  3. Отложенная загрузка изображений: минимизирует пересчёт сетки при больших объемах данных.

Пример с documentFragment:

var fragment = document.createDocumentFragment();
for (var i = 0; i < 10; i++) {
  var item = document.createElement('div');
  item.className = 'grid-item';
  item.textContent = 'Элемент ' + (i + 1);
  fragment.appendChild(item);
}
grid.insertBefore(fragment, grid.firstChild);
msnry.prepended(fragment.children);

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

Если проект использует jQuery, работа с prepended упрощается:

var $grid = $('.grid').masonry({
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  percentPosition: true
});

var $newItem = $('<div class="grid-item">Новый элемент</div>');
$grid.prepend($newItem).masonry('prepended', $newItem);

jQuery позволяет легко создавать и вставлять новые элементы, сохраняя совместимость с Masonry.

Визуальные эффекты при добавлении

Для плавного появления элементов рекомендуется использовать CSS-анимации с классами:

.grid-item {
  opacity: 0;
  transform: translateY(-20px);
  transition: all 0.3s ease;
}

.grid-item.msnry-added {
  opacity: 1;
  transform: translateY(0);
}

И JavaScript для добавления класса после вставки:

msnry.prepended(newItem);
newItem.classList.add('msnry-added');

Это создаёт эффект “выдвигающихся сверху” элементов при добавлении.

Резюме ключевых моментов prepended

  • Вставляет элементы в начало сетки, смещая существующие.
  • Поддерживает одиночные и множественные элементы.
  • Совместим с динамическими изображениями через imagesLoaded.
  • Позволяет интегрироваться с jQuery и чистым JavaScript.
  • Оптимизация возможна через групповую вставку и использование documentFragment.

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

Оглавление