Подключение к проекту

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

Установка через CDN

Наиболее быстрый способ начать работу с Isotope — подключение через CDN. Это позволяет не скачивать библиотеку локально и всегда использовать актуальную версию. Подключение осуществляется в <head> или перед закрывающим тегом <body>:

<!-- Подключение Isotope через CDN -->
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>

Важные моменты при подключении через CDN:

  • Версия библиотеки указывается в URL. Например, @3 гарантирует использование стабильной версии 3.x.
  • Сценарий необходимо подключать после загрузки HTML-контента, чтобы элементы, с которыми будет работать Isotope, уже существовали в DOM.

Установка через npm или Yarn

Для проектов, использующих сборщики модулей (Webpack, Vite, Parcel), предпочтительнее установка через менеджеры пакетов:

npm install isotope-layout
# или
yarn add isotope-layout

После установки библиотека импортируется в Jav * aScript:

import Isotope from 'isotope-layout';

Это обеспечивает интеграцию с модульной системой и возможность использования tree-shaking для оптимизации итогового бандла.

Подготовка HTML-структуры

Isotope требует наличия контейнера и элементов внутри него. Структура должна быть следующей:

<div class="grid">
  <div class="grid-item">Элемент 1</div>
  <div class="grid-item">Элемент 2</div>
  <div class="grid-item">Элемент 3</div>
</div>
  • .grid — основной контейнер, к которому будет применяться Isotope.
  • .grid-item — элементы, которые будут фильтроваться и сортироваться.
  • Имена классов могут быть произвольными, но важно сохранить согласованность в коде при инициализации.

Инициализация Isotope

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

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

const iso = new Isotope(grid, {
  itemSelector: '.grid-item', // элементы внутри контейнера
  layoutMode: 'fitRows',      // режим компоновки: fitRows, masonry, vertical, etc.
  transitionDuration: '0.6s', // длительность анимации
});

Ключевые параметры при инициализации:

  • itemSelector — обязательный параметр, указывающий селектор элементов для управления.
  • layoutMode — определяет стратегию расположения элементов. masonry создаёт “кирпичную” сетку, fitRows — упорядоченную таблицу.
  • transitionDuration — задаёт плавность анимации при фильтрации или сортировке.

Подключение стилей

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

.grid {
  display: block;
}

.grid-item {
  width: 200px;
  margin: 10px;
  float: left;
}

При использовании masonry важно задавать фиксированную ширину элементов или использовать гибкие расчёты через CSS Grid или Flexbox.

Асинхронная загрузка элементов

Если элементы создаются динамически (например, через AJAX), необходимо запускать метод layout() после добавления элементов:

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

// Перестроение сетки
iso.appended(newItem);

Методы appended и prepended позволяют корректно интегрировать новые элементы без полной переработки сетки.

Резюме основных подходов

  • CDN подходит для быстрых подключений и прототипов.
  • npm/Yarn обеспечивает модульную интеграцию и контроль версий.
  • HTML-контейнер и элементы должны быть правильно структурированы.
  • Инициализация через new Isotope(container, options) задаёт логику работы.
  • Стилизация элементов критична для корректной компоновки, особенно в masonry.
  • Динамическое добавление элементов требует вызова методов appended или layout для обновления сетки.

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

Оглавление