Вложенные Isotope-контейнеры

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

Структура вложенных контейнеров

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

<div class="grid-parent">
  <div class="grid-item">
    <div class="grid-child">
      <div class="child-item">Элемент 1</div>
      <div class="child-item">Элемент 2</div>
    </div>
  </div>
  <div class="grid-item">
    <div class="grid-child">
      <div class="child-item">Элемент 3</div>
      <div class="child-item">Элемент 4</div>
    </div>
  </div>
</div>
  • grid-parent — основной контейнер, управляет расположением крупных блоков.
  • grid-item — элементы родительского контейнера.
  • grid-child — вложенные сетки, внутри которых находятся отдельные элементы.

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

Каждый контейнер должен быть инициализирован отдельно. Для родительского контейнера:

var $parentGrid = $('.grid-parent').isotope({
  itemSelector: '.grid-item',
  layoutMode: 'masonry',
  percentPosition: true
});

Для дочерних контейнеров:

$('.grid-child').each(function() {
  $(this).isotope({
    itemSelector: '.child-item',
    layoutMode: 'fitRows'
  });
});

Ключевой момент: родительский контейнер не контролирует расположение элементов внутри дочерних сеток. Каждая сетка управляет своим набором элементов и анимацией независимо.

Фильтрация и сортировка

Вложенные контейнеры требуют отдельного управления фильтрацией и сортировкой. Пример фильтрации по классу active в дочернем контейнере:

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

Для родительского контейнера фильтрация осуществляется аналогично:

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

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

Реакция на изменение размеров и добавление элементов

Вложенные контейнеры могут изменять размеры родительских элементов. Чтобы избежать проблем с раскладкой:

$('.grid-child').on('arrangeComplete', function() {
  $parentGrid.isotope('layout');
});

При динамическом добавлении элементов:

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

Если добавляются новые родительские элементы с дочерними сетками, сначала инициализируются дочерние Isotope, затем обновляется родительская сетка.

Управление событиями и анимацией

Каждый контейнер поддерживает собственные события: arrangeComplete, layoutComplete, removeComplete. Для вложенных сеток это позволяет:

  • Синхронизировать анимацию открытия/закрытия элементов.
  • Обновлять высоту родительского блока при изменении внутреннего контента.
  • Реализовывать каскадное отображение элементов.

Пример каскадного обновления:

$('.grid-child').on('layoutComplete', function() {
  $(this).closest('.grid-item').isotope('layout');
});

Производительность

Вложенные контейнеры могут замедлять работу при большом количестве элементов. Рекомендации:

  • Минимизировать количество вложенных Isotope в одной странице.
  • Использовать percentPosition и фиксированные размеры элементов.
  • Применять imagesLoaded для отслеживания загрузки изображений:
$('.grid-child').imagesLoaded().progress(function() {
  $(this).isotope('layout');
});

Общие рекомендации

  • Всегда инициализировать дочерние сетки перед обновлением родительской.
  • Разделять фильтры и сортировку для каждой сетки, если требуется независимая логика.
  • События arrangeComplete и layoutComplete использовать для поддержания корректного расположения элементов при изменении размеров и динамическом контенте.

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

Оглавление