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

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

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

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

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

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

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

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

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

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

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

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

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

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

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

jQuery: основы

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

Смотреть

Метки:

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

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

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

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