Инициализация через jQuery

Для использования библиотеки Isotope с jQuery необходимо убедиться, что на странице подключены следующие скрипты в правильном порядке:

После подключения скриптов создается контейнер, содержащий элементы сетки. Обычно это div с классом, например, grid, внутри которого располагаются элементы с классом grid-item:


  
Элемент 1

  
Элемент 2

  
Элемент 3

Эти элементы могут иметь разный размер, чтобы продемонстрировать адаптивное размещение.

Инициализация Isotope через jQuery

Инициализация выполняется методом вызова Isotope на выбранном контейнере jQuery. Основной синтаксис:

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

Ключевые параметры:

  • itemSelector – CSS-селектор элементов сетки, которые будут подвергаться управлению.
  • layoutMode – способ расположения элементов. Основные режимы: masonry, fitRows, vertical.
  • percentPosition – использование процентов вместо пикселей при вычислении позиций.
  • masonry.columnWidth – ширина колонок для режима masonry, может быть задана как элемент-контейнер (.grid-sizer) для более точного контроля.

Для оптимальной производительности рекомендуется добавить “grid-sizer” элемент:


  

  
Элемент 1

  
Элемент 2

И настроить его в CSS:

.grid-sizer {
  width: 33.33%;
}
.grid-item {
  width: 33.33%;
}

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

Isotope позволяет фильтровать элементы динамически через jQuery. Фильтр задается через метод isotope с опцией filter:

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

Пример кнопок фильтрации:

Элементы сетки должны иметь соответствующие классы для фильтрации:

Элемент A


Элемент B

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

Сортировка выполняется с помощью параметра sortBy и getSortData. Пример:

$('.grid').isotope({
  itemSelector: '.grid-item',
  getSortData: {
    name: '.name',       // сортировка по тексту внутри элемента с классом .name
    number: '.number parseInt'
  }
});

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

Кнопки для сортировки:

Каждый элемент сетки должен содержать данные для сортировки:


  
Элемент A

  
10

Анимация и события

Isotope поддерживает плавные переходы при перестановке элементов. Для настройки скорости и эффекта анимации используется transitionDuration:

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

Можно отслеживать события, например, когда все элементы размещены:

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

События layoutComplete, removeComplete, addItems также доступны для отслеживания динамических изменений.

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

Добавление новых элементов в сетку:

var $newItem = $('
Новый элемент
');
$('.grid').append($newItem)
  .isotope('appended', $newItem);

Удаление элементов:

var $itemToRemove = $('.grid-item').first();
$('.grid').isotope('remove', $itemToRemove).isotope('layout');

Методы appended и remove позволяют динамически изменять содержимое сетки без повторной инициализации.

Оптимизация для загрузки изображений

Если в сетке используются изображения, важно дождаться их загрузки перед инициализацией Isotope, иначе расчёт размеров будет некорректным:

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

Библиотека imagesLoaded обеспечивает точное размещение элементов после загрузки всех изображений.

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

Isotope поддерживает одновременное применение фильтров и сортировки. Например:

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

// фильтр
$('.grid').isotope({ filter: '.category1' });

// сортировка
$('.grid').isotope({ sortBy: 'number' });

Важно, что параметры фильтрации и сортировки можно комбинировать через единый вызов:

$('.grid').isotope({
  filter: '.category1',
  sortBy: 'number'
});

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

Оглавление