Метод layout

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

Синтаксис метода

$grid.isotope('layout');

$grid — это jQuery-объект контейнера Isotope.
Метод не принимает аргументов, но может быть вызван в цепочке методов Isotope.

Основные задачи метода

Перестроение сетки после изменений размеров элементов Когда размеры элементов динамически изменяются (например, через CSS-трансформации, увеличение контента или изображения), Isotope не отслеживает это автоматически. Вызов layout пересчитывает позиции всех элементов и корректно их расставляет.
Обновление сетки после добавления или удаления элементов Если элементы были добавлены через append, prepend или удалены через remove, метод layout гарантирует, что оставшиеся элементы займут правильные позиции без пустых промежутков.
Принудительная анимация перестановки Даже если позиция элементов не изменилась, вызов layout инициирует анимацию элементов, если включен параметр transitionDuration в настройках Isotope.

Пример использования

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

// Динамическое изменение размера элемента
$('.grid-item').eq(0).css('height', '300px');

// Пересчет сетки
$grid.isotope('layout');

В этом примере после изменения высоты первого элемента вызывается метод layout, и Isotope корректно переставляет все элементы, избегая наложений.

Работа с изображениями

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

$grid.imagesLoaded().progress(function() {
  $grid.isotope('layout');
});

Использование плагина imagesLoaded гарантирует, что метод layout вызывается только после того, как все изображения загружены и размеры элементов известны.

Взаимодействие с другими методами

Метод layout часто комбинируется с другими методами Isotope:

append / prepend — добавление новых элементов в контейнер. После добавления вызывается layout для пересчета.
remove — удаление элементов. После удаления сетка обновляется через layout.
reloadItems — пересчитывает внутренний список элементов. Если требуется одновременно обновить позиции и свойства элементов, последовательность вызовов может быть такой:

$grid.isotope('reloadItems').isotope('layout');

Настройки, влияющие на `layout`

layoutMode — определяет алгоритм расположения элементов (masonry, fitRows, vertical, packery). Метод layout работает для всех режимов одинаково, но итоговое расположение зависит от выбранного режима.
transitionDuration — задает длительность анимации перемещения элементов при вызове layout.
percentPosition — при включенном значении true позиции элементов рассчитываются в процентах, что особенно полезно для адаптивной сетки.

Примеры практических сценариев

Динамическая адаптация под размеры окна

$(window).resize(function() {
  $grid.isotope('layout');
});

При изменении размеров окна метод layout обеспечивает корректное перераспределение элементов по новой ширине контейнера.

Случай динамического контента

$('.add-item').on('click', function() {
  var $newItem = $('<div class="grid-item">Новое содержимое</div>');
  $grid.append($newItem).isotope('appended', $newItem);
  $grid.isotope('layout');
});

Метод layout здесь гарантирует, что новые элементы аккуратно вписываются в существующую сетку, сохраняя визуальную гармонию.