Август 2017
Автор: Рубрика: Верстка Комментариев нет

Адаптивные плитки из картинок на сайте плагином masonry

Адаптивные плитки из картинок на сайте плагином masonry

Сделаем фон экрана из адаптивных плиток с помощью плагина masonry.

Нам понадобится набор любых изображений, около 12 штук.

Все картинки положим

в папку img.

Скачаем три плагина с сайтов или по этой ссылке.

Подключаем плагины в gulpfile.js.


Подключаем плагины masonry в gulpfile.js

Зададим в index.html структуру

Мы будем использовать bootstarp, поэтому первый див у нас с классом conteiner, у этого дива всегда идет следующий класс row.

Объединим все изображения классом masonry.

Разобьем все картинки на три колонки

  • col-md-3
  • col-sm-3
  • col-xs-6

У всех картинок один класс item.

Сделаем стилизацию css для картинок

  1. Сперва уберем отступы по бокам padding: 0 у класса masonry.
  2. Дальше размер картинки .item img делаем размер сто процентов width: 100%, чтобы их видеть целиком.
  3. Чтобы item занимали три картинки на весь экран, зададим свойство height: 33.34vh.

Добавим код в common.js

Берем переменную masonry, в которую включены все item.

После того как все картинки загрузятся masonry плагин делает разметку с помощью imagesLoaded.

Когда сформировались картинки задаются правила.

Так как картинки разных размеров они будут разрознено.

Что бы все изображения поставить в один ряд выровнять воспользуемся плагином imagefill , на сайте видно как он работает в демо ролике.

Смысл не главное, какой ширины или высоты колонка изображение подстроится, чтобы занять всю область.

воспользуемся плагином imagefill выравнять картинки

Добавим параметр как на сайте в скрипт $(.item).imagefill ().

Результат работы в браузере.

Результат работы в браузере masonry плагина

Скрипт common.js.

Комментариев нет

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

Комментарии запрещены