itemSelector

Свойство itemSelector является ключевым при работе с библиотекой Masonry в JavaScript. Оно определяет, какие элементы внутри контейнера будут позиционироваться с помощью Masonry. По сути, это CSS-селектор, который сообщает Masonry, на какие дочерние элементы следует применять алгоритм расположения.

var msnry = new Masonry('.grid', {
  itemSelector: '.grid-item',
  columnWidth: 200,
  gutter: 10
});

В этом примере Masonry будет применять свои вычисления только к элементам с классом .grid-item внутри контейнера .grid. Все остальные элементы контейнера остаются без изменений.

Синтаксис и типы селекторов

itemSelector принимает строку с любым валидным CSS-селектором:

  • Класс: .grid-item — выбирает элементы с указанным классом.
  • ID: #item1 — выбирает конкретный элемент с указанным ID.
  • Тег: div — выбирает все элементы указанного тега внутри контейнера.
  • Комбинированный селектор: .grid-item.highlight — выбирает элементы с обоими классами .grid-item и .highlight.

Важно помнить, что Masonry применяет позиционирование только к непосредственным потомкам контейнера, соответствующим селектору.

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

При динамическом добавлении элементов в Masonry (append или prepend) itemSelector автоматически используется для фильтрации новых элементов. Пример:

var newItem = document.createElement('div');
newItem.className = 'grid-item';
document.querySelector('.grid').appendChild(newItem);

msnry.appended(newItem);

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

Взаимодействие с columnWidth и gutter

Эффективная работа Masonry требует синхронизации itemSelector с columnWidth. Например:

var msnry = new Masonry('.grid', {
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  gutter: '.gutter-sizer'
});

Здесь .grid-sizer определяет базовую ширину колонки, .gutter-sizer — промежутки между элементами. Masonry вычисляет позиции всех элементов, подходящих под itemSelector, исходя из этих значений. Если селектор задан неправильно, Masonry не сможет корректно распределить элементы по колонкам, что приведет к наложению или пропускам в сетке.

Фильтрация и условное отображение

itemSelector можно использовать для реализации фильтров контента. Например, с помощью динамического изменения классов можно показывать только элементы определённого типа:

// Показываем только элементы с классом "featured"
msnry.items.forEach(function(item){
  if (!item.element.classList.contains('featured')) {
    item.element.style.display = 'none';
  } else {
    item.element.style.display = '';
  }
});
msnry.layout();

Эффект: Masonry перестраивает сетку, учитывая только видимые элементы, которые соответствуют itemSelector.

Практические советы

  • Всегда убедиться, что itemSelector корректно отражает структуру HTML-контейнера.
  • Для гибкой сетки использовать отдельный элемент-сайзер (.grid-sizer) и промежутки (.gutter-sizer).
  • При изменении DOM применять методы appended, prepended и remove для новых или удалённых элементов, чтобы Masonry корректно обновлял позиции.
  • Комбинированные и сложные селекторы позволяют управлять отдельными подмножествами элементов внутри одной сетки.

itemSelector обеспечивает точный контроль над тем, какие элементы Masonry будет учитывать при построении сетки. Правильное использование этого свойства является основой стабильной и красивой верстки с динамическими и разнородными элементами.

Оглавление