Masonry jQuery. Оптимальное размещение элементов сайта

Masonry jQuery. Оптимальное размещение элементов сайта

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

скачать исходникискачать урок

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

Для начала, давайте рассмотрим тестовый сайт, с которым мы будем сегодня работать.

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

Правила CSS, которые формируют оформление и определяют ширину каждого блока.

Теперь давайте перейдем на официальный сайт разработчика библиотеки Masonry.

Затем, используя ссылку “Download masonry pkgd.min.js”, скачиваем последнюю актуальную версию библиотеки в каталог хранения скриптов JavaScript (в моем случае это папка js). Так же для работы нам понадобится библиотека jQuery. Поэтому скачайте ее и аналогично скопируйте в тот же каталог.

Теперь подключаем скачанные библиотеки к тестовой странице.

Помимо этого я так же подключил пустой файл script.js, в котором мы будем вести кодирование на языке JavaScript.

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

Сейчас мы рассмотрим работу библиотеки в связке с jQuery. А значит, выбираем родительский элемент с классом grid, в котором должны бить размещены интересующие блоки и вызываем на исполнение метод masonry(). В качестве первого аргумента передаем в виде литерала объекта набор обязательных параметров:

itemSelector – CSS селектор элементов, которые необходимо оптимально разместить в блоке, для которого вызван метод masonry().

columnWidth – ширина колонок сетки, которая будет использоваться для расчета позиций элементов.

Обновив информацию в браузере, мы увидим следующий результат.

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

А значит, давайте добавим дополнительную настройку:

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

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

Настройки, которые дополнительно можно использовать:

gutter – растояние между отображаемыми блоками в пикселях.

percentPosition – если true, то значения позиций элементов будут определены в процентах;

fitWidth – если true, то ширина родительского контейнера будет определена исходя из размеров отображаемых блоков и числу сформированных колонок;

originLeft – данный параметр определяет горизонтальное расположение блоков. Если false – элементы, будут располагаться справа на лево (по умолчанию данный параметр равен true, а значит, элементы располагаются слева на право).

originTop — данный параметр определяет вертикальное расположение блоков. Если false – элементы, будут располагаться снизу в верх (по умолчанию данный параметр равен true, а значит, элементы располагаются сверху вниз).

resize – если false, позиции элементов не будут изменяться при изменении размеров окна браузера.

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

На этом данный урок завершен, надеюсь библиотека Masonry Вас заинтересовала и Вы будете использовать ее в своих наработках. Всего Вам доброго и удачного кодирования!!!

Метки:

Похожие статьи:

Комментарии Вконтакте: