Структура документации

Isotope — это библиотека JavaScript, предназначенная для динамического управления сетками элементов на странице с поддержкой фильтрации, сортировки и анимации. Она строится вокруг концепции контейнера (container) и элементов (item), которые размещаются в этом контейнере по выбранной схеме: masonry, fitRows или vertical. Контейнер и элементы — ключевые сущности, которые используются во всех методах и настройках Isotope.

Контейнер — это HTML-элемент, содержащий сетку элементов, например:

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

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

Инициализация и базовая структура

Инициализация Isotope производится через создание нового экземпляра класса Isotope, передавая контейнер и объект опций:

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 — ширина колонки для masonry-сетки; может быть фиксированным значением или селектором.

Grid Sizer — скрытый элемент внутри контейнера, задающий базовую ширину колонки:

<div class="grid-sizer"></div>

Использование grid-sizer позволяет сетке динамически подстраивать ширину элементов при изменении размера окна.

Методы управления сеткой

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

Фильтрация

Фильтрация позволяет отображать только определённые элементы на основе CSS-селектора или функции:

iso.arrange({ filter: '.category1' });

Можно использовать функцию для более сложной логики фильтрации:

iso.arrange({
  filter: function(itemElem) {
    return itemElem.textContent.includes('JavaScript');
  }
});

Сортировка

Сортировка управляется через ключи данных элементов (data-*) или функции:

iso.arrange({
  sortBy: 'name',
  getSortData: {
    name: '[data-name]',
    date: '[data-date] parseInt'
  }
});

Параметры сортировки:

  • sortBy — ключ сортировки.
  • getSortData — объект с функциями или селекторами, определяющими значение для сортировки каждого элемента.

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

Элементы можно динамически добавлять и удалять, при этом Isotope автоматически перестраивает сетку:

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

Удаление элементов:

var itemsToRemove = document.querySelectorAll('.grid-item.remove');
iso.remove(itemsToRemove);
iso.layout(); // Перестроение сетки после удаления

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

Если размеры элементов изменились, необходимо вызвать метод layout:

iso.layout();

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

iso.reloadItems();
iso.layout();

Опции и конфигурации

Isotope имеет несколько групп опций:

  • layoutMode — определяет способ расположения элементов (masonry, fitRows, vertical).
  • transitionDuration — продолжительность анимации, например '0.4s'.
  • hiddenStyle / visibleStyle — CSS-свойства для скрытых и видимых элементов, позволяющие контролировать анимацию появления и исчезновения.
  • originLeft / originTop — задают исходные точки для расчета позиции элементов.
  • stagger — задержка анимации между элементами для плавного эффекта каскада.

Пример использования анимации с задержкой:

var iso = new Isotope('#grid', {
  itemSelector: '.grid-item',
  layoutMode: 'masonry',
  transitionDuration: '0.6s',
  stagger: 30
});

Обработка событий

Isotope поддерживает несколько событий, к которым можно привязать обработчики:

  • arrangeComplete — вызывается после завершения фильтрации или сортировки.
  • layoutComplete — вызывается после завершения перестроения сетки.
  • removeComplete — вызывается после удаления элементов.

Пример привязки события:

iso.on('arrangeComplete', function(filteredItems) {
  console.log('Фильтрация завершена. Отображено элементов:', filteredItems.length);
});

Работа с динамическими коллекциями

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

Пример динамического добавления нескольких элементов:

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);
}

iso.appended(items);

После добавления сетка автоматически перестроится и применит текущие фильтры и сортировку.

Организация документации по Isotope

Документация должна быть структурирована по принципу “сущность → методы → примеры”, включая:

  • Контейнер и элементы.
  • Режимы расположения и опции.
  • Методы фильтрации и сортировки.
  • Динамическое добавление и удаление элементов.
  • Обработку событий и анимации.
  • Практические примеры для различных сценариев.

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

Оглавление