Обновление макета после изменений

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

Основной метод для обновления макета — это layout(). Этот метод пересчитывает позиции всех элементов внутри контейнера и перестраивает сетку в соответствии с текущими настройками layoutMode.

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

// Обновление макета вручную
$grid.isotope('layout');

Метод layout() не изменяет сам набор элементов, он лишь пересчитывает их расположение. Это полезно после динамического изменения размеров элементов через CSS или JS.

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

Isotope предоставляет методы appended(), prepended() и remove(), которые автоматически обновляют макет после изменения коллекции элементов.

Добавление элементов:

var $items = $('<div class="grid-item">Новый элемент</div>');
$grid.append($items)
     .isotope('appended', $items);
  • appended() принимает новые элементы и добавляет их в существующую сетку.
  • Сразу после добавления элементы позиционируются в соответствии с выбранным режимом (masonry, fitRows и т.д.).
  • Плавная анимация возможна благодаря встроенной анимации Isotope.

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

var $itemToRemove = $('.grid-item.to-remove');
$grid.isotope('remove', $itemToRemove)
     .isotope('layout');
  • Метод remove() удаляет элементы из DOM и из внутреннего состояния Isotope.
  • После удаления необходимо вызвать layout(), чтобы оставшиеся элементы корректно заняли освободившееся место.

Пересчет макета при изменении размеров элементов

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

Пример с изображениями:

$grid.imagesLoaded().progress(function() {
  $grid.isotope('layout');
});
  • Используется библиотека imagesLoaded для отслеживания полной загрузки изображений.
  • После загрузки каждого изображения вызывается layout(), что предотвращает наложение элементов и разрыв сетки.

Изменение размеров через JS:

$('.grid-item').each(function() {
  $(this).css('height', Math.random() * 200 + 100);
});
$grid.isotope('layout');
  • Любые динамические изменения CSS требуют пересчета макета.
  • Вызов layout() гарантирует, что сетка отобразится без перекрытий и с правильными отступами.

Фильтрация и сортировка с обновлением макета

Методы фильтрации и сортировки автоматически вызывают обновление макета:

// Фильтрация по классу
$grid.isotope({ filter: '.active' });

// Сортировка по атрибуту
$grid.isotope({ sortBy: 'name' });
  • После применения фильтра видны только подходящие элементы, а все остальные скрываются.
  • Позиции элементов пересчитываются автоматически.
  • Для динамически изменяющихся элементов, фильтров или атрибутов, можно комбинировать с layout() для полной синхронизации.

Оптимизация обновлений

Частое вызовы layout() могут быть ресурсоемкими на больших сетках. Оптимизация достигается следующими подходами:

  1. Группировка изменений: Если добавляется несколько элементов одновременно, объединять их в один вызов appended() вместо многократного вызова layout().

  2. Использование таймаута: Для динамических изменений с анимациями можно задерживать пересчет:

var timeout;
function updateLayout() {
  clearTimeout(timeout);
  timeout = setTimeout(function() {
    $grid.isotope('layout');
  }, 100);
}
  1. Отслеживание только изменившихся элементов: Если известен только небольшой набор элементов, их можно пересчитать индивидуально через updateSortData() и затем layout().

Пересчет данных для сортировки

Если содержимое элементов изменяется, что влияет на сортировку, необходимо обновить данные сортировки:

$grid.isotope('updateSortData', $items);
$grid.isotope('layout');
  • updateSortData() позволяет пересчитать значения для сортировки, например, атрибуты data-name или текст внутри элементов.
  • После обновления данных необходимо вызвать layout(), чтобы сетка отобразила элементы в правильном порядке.

Совмещение динамических изменений

На практике часто требуется комбинировать добавление, удаление, фильтрацию и пересчет размеров. Алгоритм действий следующий:

  1. Добавить или удалить элементы (appended(), remove()).
  2. Обновить данные сортировки, если они изменились (updateSortData()).
  3. Пересчитать макет (layout()).
  4. Если используются изображения или динамическое содержимое, вызывать layout() после полной загрузки (imagesLoaded()).

Это обеспечивает корректное и плавное отображение сетки в любых сценариях.

Оглавление