Свойство itemSelector

Свойство itemSelector в библиотеке Isotope отвечает за определение элементов контейнера, которые будут участвовать в сортировке, фильтрации и позиционировании сетки. Оно является обязательным для корректной работы всех функций библиотеки, так как без него Isotope не сможет определить, какие элементы являются «предметами» (items) внутри контейнера.

Определение и синтаксис

Синтаксис свойства выглядит следующим образом:

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

Здесь .grid — контейнер, а .grid-item — CSS-селектор для элементов, которые будут обрабатываться Isotope. Селектор может быть любым, соответствующим стандартному синтаксису CSS (.class, #id, tag или их комбинации).

Ключевые моменты использования

  1. Обязательность свойства Без itemSelector Isotope не сможет распознавать элементы сетки, и все методы работы с элементами (filter, sortBy, shuffle) будут бесполезны.

  2. Совместимость с динамическим контентом Элементы, добавленные в контейнер после инициализации Isotope, должны соответствовать селектору itemSelector, иначе они не будут частью сетки. Например, при добавлении элементов через append или insert:

    var newItem = document.createElement('div');
newItem.className = 'grid-item';
iso.appended(newItem);

    Если новый элемент не имеет класса .grid-item, Isotope его проигнорирует.

  3. Гибкость селекторов itemSelector поддерживает сложные CSS-селекторы. Например:

    itemSelector: '.grid-item.active'

    В этом случае в сетку будут включены только элементы с обоими классами .grid-item и .active.

  4. Производительность Выбор селектора напрямую влияет на производительность. Сложные селекторы, включающие потомков (.container > .grid-item > span), замедляют работу библиотеки, особенно при большом количестве элементов.

Практические примеры

Фильтрация элементов по классу:

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

document.querySelector('#filter-active').addEventListener('click', function() {
  iso.arrange({ filter: '.active' });
});

Здесь itemSelector .grid-item определяет все элементы сетки, а фильтр .active выбирает только активные элементы.

Сортировка элементов по атрибуту:

var iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'masonry',
  getSortData: {
    name: '[data-name]',
    price: '[data-price] parseInt'
  }
});

iso.arrange({ sortBy: 'price' });

Свойство itemSelector гарантирует, что сортировка применяется только к .grid-item и игнорирует другие элементы внутри контейнера, например заголовки или пустые блоки.

Подводные моменты

  • Не включать в itemSelector контейнеры или родительские элементы, так как это может вызвать некорректное позиционирование.
  • Совмещение с анимацией: Isotope использует itemSelector для расчёта позиций элементов при анимации перемещения. Если элемент не совпадает с селектором, он останется на месте и не будет анимирован.
  • Влияние на методы работы с элементами: методы remove, appended, insert, stamp и reloadItems учитывают только элементы, соответствующие itemSelector.

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

  • Всегда указывать селектор, соответствующий всем элементам сетки.
  • Поддерживать единообразие классов и структуры HTML.
  • Проверять динамически добавленные элементы на соответствие селектору.
  • Избегать слишком сложных селекторов для повышения производительности.

itemSelector — это фундаментальная настройка, определяющая, какие элементы будут частью Isotope-сетки, и напрямую влияющая на работу фильтров, сортировки и анимаций.

Оглавление