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

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

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

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

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

<!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, которые формируют оформление и определяют ширину каждого блока.

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. Поэтому скачайте ее и аналогично скопируйте в тот же каталог.

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

<script src="js/jquery.js"></script>
<script src="js/masonry.pkgd.min.js"></script>

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

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

jQuery(function ($) {
 $('.grid').masonry({
 itemSelector: '.grid-item',
 columnWidth: 50,
 });
});

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

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

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

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

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

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 Вас заинтересовала и Вы будете использовать ее в своих наработках. Всего Вам доброго и удачного кодирования!!!

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

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

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

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree