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

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

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

автор

Автор: Виктор Гавриленко

Меня зовут Виктор Гавриленко, по образованию я инженер электромеханик. Еще учась в институте, начал увлекаться компьютерными технологиями и программированием, на протяжении двух лет усиленно занимаюсь разработкой интернет сайтов и веб-программированием. Увлекаюсь написанием небольших скриптов на языке PHP, в связке базами данных MySQL, SQLite, неплохо знаю такие движки как WordPress, Drupal, Joomla.

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

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

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