Получать рассылку по электронной почте

Введите свой email-адрес:

Delivered by FeedBurner

Навигация

Настройка и применение Isotope – jQuery плагина для управления группой блоков (сортировка, фильтрация и т.п.)

56911

Если вы не слышали раньше об Isotope, то вы многое потеряли – этот плагин по-настоящему многофункционален – тут вам и фильтрация блоков, и сортировка, и модель расположения блоков. Давайте изучим поподробнее, как это все работает.

Фильтрация

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

Для рассмотрения работы этой функции создадим html-документ,  к которому подключим два скрипта : jQuery и isotope.pkgd.min.js (его можно скачать на официальном сайте)

HTML-код будет состоять из двух частей.

Первая – это кнопки управления. Заключены они в div с id="options" и div с id="filters", в дальнейшем эти id будут использоваться скриптом. Также для кнопок заданы атрибуты data-filter, которые  содержат классы фильтруемых элементов. Обратите внимание, у первой кнопки по умолчанию указан класс is-checked, определяющий какая кнопка активна в данный момент.

Остальные классы (button, button-group) не играют существенной роли и служат для стилизации внешнего вида.

И вторая часть – сами блоки для фильтрации, оставим их такими же, как у создателей Isotope, в виде элементов таблицы Менделеева. Каждый элемент div класса item, также имеет и другой класс, по которому он будет фильтроваться (соответственно .nonmetal, .metal, .transition).


Теперь вызовем скрипт, в качестве контейнера блоков указываем класс  .isotope как в html.

При нажатии на любую из кнопок, ей будет присвоен класс is-checked, а  переменной selector – атрибут data-filter этой кнопки. От значения этой переменной зависит фильтрация. Желательно определить явно и класс блоков в  itemSelector (в приведенном примере item). В итоге, все будет выглядеть таким образом:

Демонстрационный пример  Скачать рабочий пример

Сортировка

Другая возможность  плагина – это сортировка, мне кажется все-таки она востребована меньше, чем фильтрация, если подумать для чего ее можно использовать? Ну разве что для какого-нибудь интернет-магазина.

Для иллюстрации работы скрипта по-прежнему идеальными являются химические элементы, так как у них много параметров, по которым можно сортировать. Используем в качестве демо-примера тот же html-код блоков, что и в случае фильтрации. Управляющие же кнопки несколько изменятся  – будет присутствовать два ряда кнопок – сортировка по возрастанию (asc) и по убыванию (desc), помимо того, вместо атрибута data-filter появится атрибут data-sort-by используемый в сценарии.

Сначала сценарием определяется значение атрибута  data-sort-by  нажатой кнопки и присваивается параметру SortBy (в переменной sortName), который как раз и отвечает за то, по какому признаку будут сортироваться элементы. Если родительский элемент этой кнопки имеет класс asc, то сортировка осуществляется по возрастанию, в противном случае – по убыванию.

Изотоп считывает данные из разметки с помощью getSortData. Этот параметр принимает объект с параметрами, используемыми для сортировки, в качестве их значений может выступать как функция, так и строка. Мы рассмотрим простейший вариант, когда  будут использоваться строки с классом , чтобы получить содержимое  элемента этого класса ( а именно: .name,.symbol,.weight,.number). Проблем с сортировкой по первым двум параметрам возникнуть не должно, а вот элементы класса  .number и .weight содержат числа, поэтому чтобы сортировать их правильно по возрастанию/убыванию потребуется перевести полученные скриптом значения в числовую форму. К счастью, ничего самим делать не потребуется, можно просто добавить в конце дополнительные ключевые слова parseInt и parseFloat соответственно для преобразования строки в целое и дробное число. Ниже приведен код этого сценария.

Вместо классов в getSortData могут использоваться и специальные атрибуты. Если записать html-код отдельного блока для сортировки  в таком виде (с атрибутом)

То в getSortData значение параметра symbol можно получить через этот атрибут data-symbol в квадратных скобках.

Демонстрационный пример  Скачать рабочий пример

Режимы расположения блоков в Isotope

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

Masonry

Masonry или “каменная кладка”  – очень популярная модель выстраивания элементов, при котором ими заполняется все пространство (как кирпичная стена). Эта модель широко применяется на различных сайтах, в социальных сетях. Существует также одноименный скрипт Масонри, который выстраивает блоки таким же образом.

Попробуем разобраться с тем, как запустить этот режим. На самом деле все очень просто – html-код блоков остается такой же как при  сортировке и фильтрации, только добавляются для наглядности элементы удвоенной ширины либо высоты с классами w2 или h2, чтобы собственно увидеть как выглядит “кирпичная кладка”.

Код скрипта в этом случае будет довольно прост, нужно только указать класс контейнера для блоков (.isotope), класс самих блоков (.item), модель расположения блоков (layoutMode:'masonry'). Кроме того для каждой модели расположения могут быть свои отдельные параметры, которые нужно задавать. Так, для masonry это такие параметры как

Демонстрационный пример  Скачать рабочий пример

Также существует горизонтальная версия Masonry, его работа основана на размещении элементов в оптимальной позиции на доступном горизонтальном пространстве (а не вертикальном как в первом случае). Из обязательных параметров  – rowHeight – высота строки по вертикали, если она не задана, то будет использована высота первого элемента.

Демонстрационный пример  Скачать рабочий пример

Нельзя не отметить две существенные особенности, без которых Masonry  Horizontal  не будет работать.

Подключите этот файл после js-файлов jQuery и Isotope

Если что-то непонятно смотрите в примере выше.

FitRows

Вариант выстраивания элементов, который в Isotope принят по умолчанию. Отдельные элементы расположены в виде строк. Строки ведут себя аналогично тому, как вел бы себя макет, с плавающими элементами float. fitRows идеально подходит для элементов, которые имеют одинаковую высоту.

Модель FitRows не имеет дополнительных параметров. В данном случае html- код будет прежним (можно убрать только класс h2 элементов, чтобы не допустить разной высоты). Для инициализации Isotope достаточно будет написать

Демонстрационный пример  Скачать рабочий пример

FitColumns

Вертикальная версия fitRows. Блоки  расположены в виде  столбцов.  fitColumns идеально подходит для элементов, которые имеют одинаковую ширину. Он также не имеет дополнительных параметров. Также как горизонтальная “каменная кладка”, fitColumns требует задания высоты контейнера isotope для блоков в  CSS и дополнительного файла – fit-columns.js (ссылка на скачивание). Нужно добавить в html документ тег с этим скриптом

Чтобы инициализировать скрипт нужно написать такой код

Демонстрационный пример  Скачать рабочий пример

imagesLoaded

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

Скачиваем imagesLoaded и подключаем к html странице

Понравилась статья?
Подпишитесь на RSS по e-mail
Поделитесь в социальных сетях
Вы можете также посмотреть
Комментарии
  1. Заработало. Спасибо.

  2. Когда подключаем Masonry при изменении окна браузера плитки выстраиваются относительно левого края(пустое пространство остается справа),а каким образом блок с плитками можно выставить по центру. Если сам контейнер установить через css по центру блоки в нем все равно придерживаются левого края.

    • Меня так же интересует данный вопрос. Получилось выстроить блоки по центру?

  3. Добрый день!
    Отличная статья.
    Есть один вопрос, измучился уже искать. Как сделать так, чтобы при загрузке страницы все блоки уже стояли в определенном порядке?
    У меня получается, что сначала показываются все блоки, и только потом при нажатии они устанавливаются так как нужно.

  4. Прошу прошения за вопрос от нуба:

    каким будет результирующий script при использовании imagesLoaded и isotope вместе?

  5. Помогите исправить баг, когда захожу на сайт http://licor.com.ua с мобильного то при прокрутке товаров в категории, они прыгают и меняются местами и по этому меняется порядок, а нужно сделать так чтобы когда страница загрузилась, и при прокрутке страници чтобы они не прыгали то вверх то в них

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*