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

Isotope — это мощная библиотека для фильтрации, сортировки и динамического расположения элементов на веб-странице. Одним из самых быстрых способов начать работу с Isotope является подключение через CDN (Content Delivery Network). Такой подход позволяет не устанавливать библиотеку локально и использовать её напрямую из сети, обеспечивая актуальную версию и минимальные настройки.

Подключение CSS

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

<link rel="stylesheet" href="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.css">
  • https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.css — стабильная версия 3.x.
  • Использование CDN обеспечивает автоматическую загрузку стилей с ближайшего сервера, что ускоряет отображение страницы.

Подключение JavaScript

Основной скрипт Isotope загружается аналогично через CDN. Это позволяет сразу использовать библиотеку без установки через npm или других пакетных менеджеров.

<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
  • isotope.pkgd.min.js — объединённая версия, включающая все необходимые модули Isotope.
  • Подключение перед закрывающим тегом </body> обеспечивает корректную инициализацию после загрузки DOM.

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

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

var iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'masonry',
  percentPosition: true,
  masonry: {
    columnWidth: '.grid-sizer'
  }
});
  • .grid — контейнер, содержащий элементы для Isotope.
  • itemSelector — класс элементов, которые будут фильтроваться и сортироваться.
  • layoutMode — режим расположения элементов (masonry, fitRows, vertical, cellsByRow).
  • percentPosition: true — обеспечивает корректное позиционирование при адаптивной сетке.
  • masonry.columnWidth — определяет ширину колонок для режима masonry, часто используется элемент-сизер для динамического расчета ширины.

Фильтрация элементов

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

// Отображение только элементов с классом .metal
iso.arrange({ filter: '.metal' });

// Отображение всех элементов
iso.arrange({ filter: '*' });
  • Фильтры могут быть строками CSS-селекторов или функциями, возвращающими true или false.
  • Комбинирование фильтров позволяет создавать сложные условия, например, .metal.green или функции для пользовательской логики.

Сортировка элементов

С помощью Isotope элементы можно сортировать по различным критериям:

iso.arrange({
  sortBy: 'name',
  getSortData: {
    name: '.name', // Сортировка по тексту внутри элемента с классом .name
    weight: '[data-weight] parseInt' // Сортировка по числовому значению атрибута data-weight
  }
});
  • getSortData задаёт набор правил для сортировки элементов.
  • Сортировка может быть по тексту, числам или пользовательским функциям.

Адаптивная инициализация через CDN

Использование CDN упрощает интеграцию с адаптивной версткой:

window.addEventListener('resize', function() {
  iso.layout();
});
  • При изменении размеров окна вызывается метод layout(), чтобы элементы перестроились корректно.
  • Это особенно важно при работе с masonry-сеткой и процентной шириной колонок.

Преимущества подключения через CDN

  1. Мгновенный доступ к библиотеке — не требуется локальная установка или сборка.
  2. Обновления и исправления ошибок — использование актуальной версии на сервере CDN.
  3. Минимальная настройка — подключение через <script> и <link> позволяет сразу начать работу.
  4. Кэширование в браузере — файлы с CDN часто уже загружены пользователем на других сайтах, что ускоряет загрузку страницы.

Рекомендации по использованию

  • Всегда проверять версию Isotope на CDN, чтобы избежать несовместимости с кодом.
  • Для крупных проектов рекомендуется комбинировать CDN-подключение с локальной версией на случай недоступности внешнего ресурса.
  • Использовать defer или подключение перед закрывающим </body>, чтобы скрипт не блокировал рендеринг страницы.

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

Оглавление