От автора: очень часто на страницах веб-сайтов необходимо отображать большое количество разных по размерам блоков с определенной информацией. И порой оптимально разместить данные элементы бывает достаточно сложно, особенно если предполагается, что страница будет просматриваться как на обычных компьютерах, так и на мобильных устройствах. Поэтому в данном уроке я хотел бы представить Вашему вниманию очень полезную библиотеку под названием Masonry jquery, которая автоматически разместит блоки с информацией в наиболее оптимальном варианте.
Итак, библиотека Masonry – это специальная JavaScript библиотека, которая предназначена, для оптимального динамического размещения различных блоков с информацией на страницах сайта, при этом все свободное место будет максимально использовано. Так как расчет размещения блоков опирается на их размеры, а это позволяет рационально использовать доступное пространство.
Для начала, давайте рассмотрим тестовый сайт, с которым мы будем сегодня работать.
Обратите внимание, что в центральном блоке, с серым фоном, необходимо разместить все вложенные элементы, которые сейчас отображаются, так сказать в столбик, один за другим. При этом HTML структура данной страницы следующая:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="css/style.css"/> <title>Masonry</title> <script src="js/script.js"></script> </head> <body> <div class="wrap"> <div class="karkas"> <h1>Masonry</h1> <div class="grid"> <div class="baner">...</div> <div class="grid-item blue width1">Some link 1</div> <div class="grid-item green width1">Some link 1</div> <div class="grid-item red width1">Some link 1</div> <div class="grid-item white">...</div> <div class="grid-item green">...</div> <div class="grid-item width2 gray">...</div> <div class="grid-item green">...</div> <div class="grid-item green">...</div> <div class="grid-item yellow">...</div> <div class="grid-item yellow">...</div> <div class="grid-item yellow">...</div> <div class="grid-item blue">...</div> <div class="grid-item blue">...</div> <div class="grid-item yellow">...</div> <div class="grid-item yellow">...</div> </div> </div> </div> </body> </html> |
Правила CSS, которые формируют оформление и определяют ширину каждого блока.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
body { background-color: #ac6722; } .wrap { width: 100%; } .karkas { width: 1000px; height:1000px; background-color: #e6e6e6; border-radius: 10px; margin:0px auto; text-align: center; padding:30px 10px 0px 10px; } .baner { padding:30px; background-color:#c0efd3; width: 650px; text-align: left; margin-bottom: 15px; } .grid-item { padding:10px; width:200px; margin-bottom: 20px; border-radius: 5px; } .grid { margin: 0 auto; } .width1 { width:200px; } .width2 { width:450px; } .blue { background-color: cyan; } .red { background-color: red; } .gray { background-color: gray; } .green { background-color: green; } .white { background-color: white; } .yellow { background-color: yellow; } |
Теперь давайте перейдем на официальный сайт разработчика библиотеки Masonry.
Затем, используя ссылку “Download masonry pkgd.min.js”, скачиваем последнюю актуальную версию библиотеки в каталог хранения скриптов JavaScript (в моем случае это папка js). Так же для работы нам понадобится библиотека jQuery. Поэтому скачайте ее и аналогично скопируйте в тот же каталог.
Теперь подключаем скачанные библиотеки к тестовой странице.
1 2 |
<script src="js/jquery.js"></script> <script src="js/masonry.pkgd.min.js"></script> |
Помимо этого я так же подключил пустой файл script.js, в котором мы будем вести кодирование на языке JavaScript.
Итак, библиотека Masonry скачана и подключена, а значит мы можем приступать к работе с ней. Для этого переходим в вышеуказанный файл и добавим следующий код:
1 2 3 4 5 6 |
jQuery(function ($) { $('.grid').masonry({ itemSelector: '.grid-item', columnWidth: 50, }); }); |
Сейчас мы рассмотрим работу библиотеки в связке с jQuery. А значит, выбираем родительский элемент с классом grid, в котором должны бить размещены интересующие блоки и вызываем на исполнение метод masonry(). В качестве первого аргумента передаем в виде литерала объекта набор обязательных параметров:
itemSelector – CSS селектор элементов, которые необходимо оптимально разместить в блоке, для которого вызван метод masonry().
columnWidth – ширина колонок сетки, которая будет использоваться для расчета позиций элементов.
Обновив информацию в браузере, мы увидим следующий результат.
Как Вы видите, все блоки нормально отображаются, за исключением первого элемента с классом baner , который по сути не был затронут библиотекой, так как он не попадает под выборку блоков, удовлетворяющих селектору, указанном в параметре “itemSelector”.
А значит, давайте добавим дополнительную настройку:
1 2 3 4 5 6 7 |
jQuery(function ($) { $('.grid').masonry({ itemSelector: '.grid-item', columnWidth: 50, stamp: ".baner" }); }); |
При помощи параметра stamp, Вы можете указать селектор того элемента, который будет зафиксирован на своей позиции. При этом результат будет следующим.
Таким образом, интересующие блоки оптимально размещены на странице и для реализации этого мы добавили всего несколько строк кода. Соответственно использовать библиотеку очень легко. Конечно, расчет позиций элементов осуществляется автоматически, а значит, в зависимости от ширины блоков результат размещения не всегда может быть идеальным. В этом случае нужно изменить размеры блоков для определения оптимального результата.
Настройки, которые дополнительно можно использовать:
gutter – растояние между отображаемыми блоками в пикселях.
percentPosition – если true, то значения позиций элементов будут определены в процентах;
fitWidth – если true, то ширина родительского контейнера будет определена исходя из размеров отображаемых блоков и числу сформированных колонок;
originLeft – данный параметр определяет горизонтальное расположение блоков. Если false – элементы, будут располагаться справа на лево (по умолчанию данный параметр равен true, а значит, элементы располагаются слева на право).
originTop — данный параметр определяет вертикальное расположение блоков. Если false – элементы, будут располагаться снизу в верх (по умолчанию данный параметр равен true, а значит, элементы располагаются сверху вниз).
resize – если false, позиции элементов не будут изменяться при изменении размеров окна браузера.
initLayout – если false, библиотека не будет обрабатывать элементы, а значит, они не будут оптимально располагаться в родительском контейнере.
На этом данный урок завершен, надеюсь библиотека Masonry Вас заинтересовала и Вы будете использовать ее в своих наработках. Всего Вам доброго и удачного кодирования!!!