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

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

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

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

  • layoutMode — режим компоновки. Основные варианты:

    • masonry — кирпичная сетка, элементы упорядочиваются с учётом их высоты;
    • fitRows — элементы располагаются в строгие ряды;
    • vertical — вертикальная компоновка, элементы выстраиваются сверху вниз.

  • percentPosition — при true размеры и позиции элементов задаются в процентах, что улучшает адаптивность.

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

  • iso.arrange(options) — перестроение элементов по новым правилам. Можно задавать фильтры (filter) и сортировку (sortBy).
  • iso.reloadItems() — обновляет внутренний массив элементов после добавления новых DOM-элементов.
  • iso.getItemElements() — возвращает массив текущих DOM-элементов в контейнере.
  • iso.layout() — принудительно выполняет компоновку элементов.

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

Фильтрация позволяет динамически отображать только определённые элементы. Используется метод arrange с параметром filter:

iso.arrange({ filter: '.active' });
  • CSS-селектор — фильтрует элементы по классу, идентификатору или любому атрибуту;
  • Функция — может возвращать true или false для каждого элемента:
iso.arrange({
  filter: function(itemElem) {
    return itemElem.dataset.category === 'js';
  }
});

В этом примере будут показаны только элементы с data-category="js".

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

Сортировка выполняется с помощью параметра sortBy и опционального sortAscending:

iso.arrange({
  sortBy: 'name',
  sortAscending: true
});
  • sortBy — ключ сортировки, может быть именем свойства из данных элементов;
  • sortAscending — порядок сортировки: true для возрастания, false для убывания.

Для пользовательских критериев сортировки можно использовать объект getSortData:

var iso = new Isotope('.grid', {
  getSortData: {
    name: '.name',
    weight: function(itemElem) {
      return parseFloat(itemElem.querySelector('.weight').textContent);
    }
  }
});

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

Isotope поддерживает добавление новых элементов в реальном времени с последующей компоновкой:

var newItem = document.createElement('div');
newItem.className = 'grid-item';
newItem.textContent = 'Новый элемент';
iso.appended(newItem);
iso.layout();

Для удаления элементов используется метод remove:

var itemsToRemove = iso.getItemElements().filter(item => item.classList.contains('obsolete'));
iso.remove(itemsToRemove);
iso.layout();

Вспомогательные функции

Isotope включает несколько утилит для работы с DOM и вычислений, которые упрощают интеграцию и настройку:

  • getItemElements() — возвращает текущие элементы сетки;
  • stamp(element) — помечает элемент как “фиксированный”, вокруг которого будет выстраиваться сетка, без изменения позиции;
  • unstamp(element) — убирает фиксацию;
  • destroy() — полностью удаляет Isotope с элемента, восстанавливая исходный DOM;
  • on(eventName, listener) и off(eventName, listener) — привязка и удаление событий, таких как arrangeComplete или layoutComplete.

Пример использования событий:

iso.on('arrangeComplete', function(filteredItems) {
  console.log('Фильтрация завершена, количество элементов:', filteredItems.length);
});

Работа с размерами и адаптивностью

Для точного позиционирования и адаптивной компоновки важны следующие параметры:

  • percentPosition: true — размеры и позиции элементов вычисляются в процентах;
  • masonry options — можно задавать columnWidth, чтобы задать ширину колонки;
  • fitRows options — управляет отступами через gutter.

Пример:

var iso = new Isotope('.grid', {
  layoutMode: 'masonry',
  masonry: {
    columnWidth: '.grid-sizer',
    gutter: 10
  }
});

.grid-sizer используется как шаблон ширины колонки, что облегчает создание адаптивных сеток.

Полезные трюки

  • Фильтрация + анимация: Isotope автоматически анимирует появление, скрытие и перестановку элементов.
  • Комбинирование фильтров и сортировки: Можно одновременно использовать filter и sortBy в методе arrange.
  • События для кастомизации: layoutComplete, arrangeComplete, removeComplete, appendComplete позволяют внедрять собственную логику после операций.
  • Интеграция с изображениями: использование библиотеки imagesLoaded предотвращает некорректную компоновку при асинхронной загрузке изображений:
imagesLoaded('.grid', function() {
  iso.layout();
});
  • Поддержка динамических изменений: любые изменения размеров или контента можно обработать через reloadItems() и layout() для пересчёта позиций.

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

Оглавление