Топ плагинов jQuery. Плагин RowGrid.js

Топ плагинов jQuery. Плагин RowGrid.js

От автора: приветствую вас, друзья. Продолжаем знакомиться с коллекцией ТОП плагинов jQuery. Сегодня у нас на очереди интересный плагин RowGrid.js, который позволяет выстраивать картинки (или другие объекты) в виде сетки, как в картинках Google.

Пример работы плагина можно посмотреть прямо на официальном сайте RowGrid.js.

Топ плагинов jQuery. Плагин RowGrid.js

Как вы понимаете, плагин будет очень полезен в том случае, если у нас есть много изображений, из которых мы хотим сделать нечто вроде галереи. Но при этом размеры изображений разные. Конечно, никто не мешает нам подготовить изображения перед размещением на сайте, сделать их размеры одинаковыми, но вспомните, как интересно смотрятся Google картинки, имея различные размеры. Вот, собственно, похожий эффект позволяет реализовать и наш плагин RowGrid.js.

Топ плагинов jQuery. Плагин RowGrid.js

Скачать его можно прямо с официального сайта. После получения архива с плагином, подключим его к нашей странице:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.row-grid.js"></script>

Теперь добавим картинки, используя следующую верстку:

<div class="item">
	<img src="http://lorempixel.com/220/200?1" width="220" height="200" />
</div>
<div class="item">
	<img src="http://lorempixel.com/180/200?2" width="180" height="200" />
</div>
...

Также немного стилей для блоков с картинками:

.item {
	float: left;
	margin-bottom: 15px;
}
.item img {
	max-width: 100%;
	max-height: 100%;
	vertical-align: bottom;
}

В результате без использования плагина галерея изображений выглядит пока так:

Топ плагинов jQuery. Плагин RowGrid.js

А теперь попробуем с плагином. Для этого вызовем метод rowGrid(), передав ему некоторые параметры:

$(function() {
	$(".container").rowGrid({itemSelector: ".item", minMargin: 10, maxMargin: 25, firstItemClass: "first-item"});
});

Топ плагинов jQuery. Плагин RowGrid.js

Как видим, разные по ширине картинки теперь не пляшут на странице, а вполне себе красиво и аккуратно на ней расположились. Мне нравится. На этом у меня сегодня все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и библиотеке jQuery UI вы можете узнать из наших уроков или курса. Удачи!

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

Курс по jQuery: основы

Изучите 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