Использование с jQuery

Isotope — это мощная библиотека для создания динамических сеток с фильтрацией, сортировкой и анимацией элементов. При использовании вместе с jQuery процесс инициализации упрощается за счёт удобного синтаксиса. Основной шаг — это выбор контейнера и вызов метода .isotope():

$('.grid').isotope({
  itemSelector: '.grid-item',
  layoutMode: 'masonry'
});

Пояснение ключевых параметров:

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

  • layoutMode — режим расположения элементов. Самые популярные:

    • masonry — сетка с кирпичной выкладкой, автоматически подстраивающая высоту элементов.
    • fitRows — ровные строки с одинаковой высотой.
    • vertical — вертикальное расположение без учета ширины.

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

Фильтрация позволяет отображать только элементы, соответствующие определённым критериям. С jQuery это делается с помощью передачи селектора в метод .isotope():

$('.filter-button').on('click', function() {
  var filterValue = $(this).attr('data-filter');
  $('.grid').isotope({ filter: filterValue });
});

Ключевые моменты:

  • Атрибут data-filter на кнопках обычно содержит CSS-селектор элементов, например .category1 или * для всех элементов.
  • Метод .isotope({ filter: filterValue }) автоматически применяет фильтр с анимацией.
  • Можно использовать комбинированные фильтры, например '.category1.category2', чтобы показать элементы, удовлетворяющие нескольким условиям одновременно.

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

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

$('.grid').isotope({
  itemSelector: '.grid-item',
  layoutMode: 'masonry',
  getSortData: {
    name: '.name', // текстовый контент элемента
    price: '[data-price] parseInt' // значение атрибута data-price как число
  }
});

Для вызова сортировки используется метод:

$('.sort-button').on('click', function() {
  var sortByValue = $(this).attr('data-sort-by');
  $('.grid').isotope({ sortBy: sortByValue });
});

Особенности сортировки:

  • Можно сортировать по тексту, числам или даже пользовательским функциям.
  • Параметр sortAscending позволяет задавать порядок сортировки:
$('.grid').isotope({ sortBy: 'price', sortAscending: false });

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

Isotope корректно обрабатывает изменения DOM, что особенно важно при работе с jQuery. Для добавления новых элементов используется метод appended:

var $newItems = $('<div class="grid-item new-item">Новый элемент</div>');
$('.grid').append($newItems)
           .isotope('appended', $newItems);

Для удаления элементов применяется метод remove с последующим обновлением Isotope:

var $itemsToRemove = $('.grid-item.remove-me');
$('.grid').isotope('remove', $itemsToRemove)
           .isotope('layout');

Замечания по динамическим изменениям:

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

Анимация и опции переходов

Isotope поддерживает плавные анимации при изменении позиций элементов. Основные опции:

$('.grid').isotope({
  itemSelector: '.grid-item',
  layoutMode: 'masonry',
  transitionDuration: '0.6s'
});
  • transitionDuration — длительность анимации перемещения элементов.
  • Можно использовать CSS-свойства transform и opacity для дополнительных эффектов.
  • Для отключения анимации при больших обновлениях удобно ставить transitionDuration: 0.

События Isotope

jQuery облегчает подписку на события Isotope:

$('.grid').on('arrangeComplete', function(event, filteredItems) {
  console.log('Количество элементов после фильтрации:', filteredItems.length);
});

$('.grid').on('layoutComplete', function(event, laidOutItems) {
  console.log('Сетка полностью обновлена');
});

Типы событий:

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

Работа с изображениями

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

$('.grid').imagesLoaded(function() {
  $('.grid').isotope({
    itemSelector: '.grid-item',
    layoutMode: 'masonry'
  });
});

Это предотвращает неправильное позиционирование элементов из-за задержки загрузки изображений.

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

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

$('.filter-button, .sort-button').on('click', function() {
  var filterValue = $('.filter-button.active').attr('data-filter');
  var sortByValue = $('.sort-button.active').attr('data-sort-by');
  $('.grid').isotope({
    filter: filterValue,
    sortBy: sortByValue
  });
});

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

Резюме по использованию jQuery с Isotope

  • Использование jQuery значительно упрощает инициализацию и обработку событий.
  • Методы .isotope(), .append(), .remove(), .on() позволяют управлять элементами динамически.
  • Фильтрация и сортировка могут комбинироваться, создавая гибкую интерактивную сетку.
  • Важно учитывать загрузку изображений для корректного отображения сетки.

Этот набор техник покрывает все ключевые сценарии работы с Isotope через jQuery и обеспечивает стабильное и плавное поведение элементов в динамических интерфейсах.

Оглавление