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

Для работы с библиотекой Isotope необходимо создать контейнер и элементы сетки. Контейнер может быть любым блоком HTML, например:

<div class="grid">
  <div class="grid-item">Элемент 1</div>
  <div class="grid-item">Элемент 2</div>
  <div class="grid-item">Элемент 3</div>
</div>

Инициализация происходит через Jav * aScript:

var grid = document.querySelector('.grid');
var iso = new Isotope(grid, {
  itemSelector: '.grid-item',
  layoutMode: 'masonry',
  percentPosition: true,
  masonry: {
    columnWidth: '.grid-sizer'
  }
});

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

  • itemSelector – CSS-класс элементов сетки.
  • layoutMode – режим раскладки (masonry, fitRows, vertical, и др.).
  • percentPosition – использование процентов для ширины колонок.
  • masonry.columnWidth – ширина одной колонки, может быть фиксированная или зависеть от элемента .grid-sizer.

Создание новых элементов для добавления

Для добавления элементов в конец сетки сначала нужно их создать. Элементы можно формировать динамически через Jav * aScript:

var newItem = document.createElement('div');
newItem.className = 'grid-item';
newItem.textContent = 'Новый элемент';

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

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

Добавление элементов в контейнер

Чтобы добавить элементы в конец сетки и сохранить корректное поведение Isotope, необходимо использовать метод append:

// Добавление одного элемента
iso.appended(newItem);
grid.appendChild(newItem);

// Добавление массива элементов
items.forEach(function(item) {
  grid.appendChild(item);
});
iso.appended(items);

Важные моменты:

  • Метод appendChild добавляет элементы в DOM, но не обновляет Isotope.
  • Метод iso.appended() уведомляет Isotope о новых элементах, чтобы они были интегрированы в раскладку.
  • Для нескольких элементов передается массив, для одного – одиночный элемент.

Обновление раскладки после добавления

Иногда после добавления элементов требуется пересчитать позицию всех элементов:

iso.layout();

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

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

Применение фильтров и сортировки к новым элементам

Если в сетке настроены фильтры или сортировка, новые элементы автоматически подчиняются этим правилам после добавления и вызова layout. Например:

iso.arrange({
  filter: '.active',
  sortBy: 'name'
});

Таким образом, новые элементы будут учтены при текущих фильтрах и порядке сортировки.

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

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

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

После вызова iso.appended() элементы плавно появятся на своих позициях, интегрируясь в существующую сетку.

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

  • Создавать элементы заранее и хранить их в массиве удобнее для массового добавления.
  • Всегда вызывать iso.appended() после вставки в DOM.
  • Для элементов с динамическими размерами использовать imagesLoaded или слушать событие load.
  • При необходимости можно комбинировать append с фильтрами и сортировкой для упорядоченного добавления.

Пример полной интеграции

var grid = document.querySelector('.grid');
var iso = new Isotope(grid, {
  itemSelector: '.grid-item',
  layoutMode: 'masonry',
  percentPosition: true
});

var newItems = [];
for (var i = 0; i < 3; i++) {
  var item = document.createElement('div');
  item.className = 'grid-item';
  item.textContent = 'Новый ' + (i + 1);
  grid.appendChild(item);
  newItems.push(item);
}

iso.appended(newItems);

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

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

Оглавление