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

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

Подготовка контейнера

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

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

Инициализация Isotope выглядит следующим образом:

const iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'masonry', // или 'fitRows', 'vertical', в зависимости от задачи
  transitionDuration: '0.6s'
});

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

Для добавления элемента в начало сетки необходимо сначала создать DOM-элемент:

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

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

Добавление элемента в начало DOM

Isotope не имеет встроенного метода prepend, но можно использовать стандартный DOM-метод insertBefore:

const grid = document.querySelector('.grid');
grid.insertBefore(newItem, grid.firstChild);

Этот шаг физически добавляет элемент в начало контейнера, но Isotope еще не знает о новом элементе, поэтому сетка не перестроится автоматически.

Обновление Isotope и анимация

Чтобы Isotope правильно распознал новый элемент и применил анимацию, используется метод prepended:

iso.prepended(newItem);

Метод prepended выполняет следующие действия:

  • Добавляет элемент в внутренний массив Isotope.
  • Перестраивает сетку с учетом нового элемента.
  • Запускает анимацию плавного появления элемента и перемещения существующих элементов.

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

const newItems = [item1, item2, item3];
newItems.forEach(item => grid.insertBefore(item, grid.firstChild));
iso.prepended(newItems);

Работа с фильтрацией и сортировкой после добавления

После добавления нового элемента в начало может потребоваться применить текущие фильтры или сортировку, чтобы сетка оставалась согласованной. Isotope автоматически применяет текущие фильтры при вызове prepended, но для сортировки необходимо явно вызвать метод arrange:

iso.arrange({ sortBy: 'original-order' }); // Сортировка по порядку добавления

Для сохранения текущей фильтрации:

const currentFilter = iso.options.filter;
iso.arrange({ filter: currentFilter });

Управление анимацией и задержками

Чтобы добавить плавность при появлении элементов в начале, можно использовать CSS-переходы:

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

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

Isotope автоматически добавляет класс isotope-item после расчета позиций, что позволяет элементам появляться с анимацией.

Практические советы

  • Подготовка элементов заранее: Создание DOM-элементов до вставки ускоряет рендеринг и снижает вероятность мерцания.
  • Множественные вставки: При добавлении нескольких элементов одновременно использовать массив для prepended, а не многократные вызовы метода для каждого элемента.
  • Стили для новых элементов: Чтобы анимация была плавной, рекомендуется скрывать элемент до вставки через CSS (opacity: 0) и использовать классы Isotope для триггера анимации.
  • События Isotope: Методы on('layoutComplete', callback) и on('arrangeComplete', callback) позволяют выполнять дополнительные действия после перестроения сетки.

Итоговый пример

const newItem = document.createElement('div');
newItem.classList.add('grid-item');
newItem.textContent = 'Новый элемент';
newItem.style.opacity = 0;

const grid = document.querySelector('.grid');
grid.insertBefore(newItem, grid.firstChild);

iso.prepended(newItem);
iso.on('layoutComplete', () => {
  newItem.style.opacity = 1; // плавное появление
});

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

Оглавление