Минимальная конфигурация

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

// Инициализация Isotope на контейнере с классом .grid
var elem = document.querySelector('.grid');
var iso = new Isotope(elem, {
  // Настройки по умолчанию
  itemSelector: '.grid-item',
  layoutMode: 'fitRows'
});

itemSelector указывает, какие элементы внутри контейнера будут управляться библиотекой. В простейшем случае это класс всех элементов сетки. layoutMode определяет способ расположения элементов; для минимальной конфигурации рекомендуется fitRows или masonry, которые не требуют дополнительных настроек.

HTML-структура контейнера

Контейнер должен содержать элементы, которые будут упорядочиваться. Простейший пример:

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

Класс .grid соответствует контейнеру, а .grid-item — отдельным элементам сетки. В минимальной конфигурации достаточно использовать только эти классы.

Основные параметры минимальной конфигурации

Параметр Описание Значение по умолчанию
itemSelector Селектор элементов для управления '.grid-item'
layoutMode Режим компоновки элементов 'masonry'
percentPosition Использование процентов для позиционирования false
originLeft Расположение элементов слева направо true

В минимальном варианте достаточно указать itemSelector и, при необходимости, layoutMode. Остальные параметры можно оставить по умолчанию.

Статическое позиционирование элементов

Isotope автоматически вычисляет позиции элементов при инициализации. Для fitRows элементы располагаются по строкам с одинаковой шириной, а для masonry создается «каскадная» сетка, где высота элементов может различаться. Минимальная конфигурация не требует указания размеров или отступов — библиотека сама определяет их из CSS.

Обновление и рендер после загрузки контента

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

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

// Добавление нового элемента
var newItem = document.createElement('div');
newItem.classList.add('grid-item');
newItem.textContent = 'Новый элемент';
grid.appendChild(newItem);

// Обновление Isotope
iso.appended(newItem);

Метод appended позволяет добавить элемент в сетку и корректно пересчитать позиции.

Минимальные стили для корректного отображения

Даже при минимальной конфигурации стоит задать базовые CSS:

.grid {
  display: block;
}

.grid-item {
  width: 200px;
  margin-bottom: 10px;
  float: left; /* Для fitRows необходимо правильное обтекание */
}

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

Динамическая фильтрация в минимальной конфигурации

Даже без сложных настроек можно добавить простую фильтрацию по классам:

var filterButtons = document.querySelectorAll('.filter-button');

filterButtons.forEach(function(button) {
  button.addEventListener('click', function() {
    var filterValue = button.getAttribute('data-filter');
    iso.arrange({ filter: filterValue });
  });
});

HTML-кнопки фильтрации могут выглядеть так:

<button class="filter-button" data-filter="*">Все</button>
<button class="filter-button" data-filter=".category1">Категория 1</button>

Метод arrange пересчитывает позиции элементов и отображает только те, которые соответствуют фильтру.

Итог минимальной конфигурации

Минимальная конфигурация Isotope включает:

  1. Контейнер с элементами (.grid и .grid-item).
  2. Подключение библиотеки и простую инициализацию (itemSelector, layoutMode).
  3. Базовые CSS для корректного отображения.
  4. При необходимости динамическое добавление элементов через метод appended.
  5. Простую фильтрацию с помощью метода arrange.

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

Оглавление