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

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

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

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

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

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

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

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

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

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

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

jQuery: основы

Изучите jQuery с нуля!

Смотреть

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree