Сделаем фон экрана из адаптивных плиток с помощью плагина masonry.
Нам понадобится набор любых изображений, около 12 штук.
Все картинки положим
в папку img.
Скачаем три плагина с сайтов или по этой ссылке.
Подключаем плагины в gulpfile.js.
Зададим в index.html структуру
Мы будем использовать bootstarp, поэтому первый див у нас с классом conteiner, у этого дива всегда идет следующий класс row.
Объединим все изображения классом masonry.
Разобьем все картинки на три колонки
- col-md-3
- col-sm-3
- col-xs-6
У всех картинок один класс item.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
div class="container"> <div class="row"> <div class="masonry"> <div class="col-md-3 col-sm-3 col-xs-6 item"><img src="img/1.jpg" alt="alt"></div> <div class="col-md-3 col-sm-3 col-xs-6 item"><img src="img/2.jpg" alt="alt"></div> <div class="col-md-3 col-sm-3 col-xs-6 item"><img src="img/3.jpg" alt="alt"></div> <div class="col-md-3 col-sm-3 col-xs-6 item"><img src="img/4.jpg" alt="alt"></div> <div class="col-md-3 col-sm-3 col-xs-6 item"><img src="img/5.jpg" alt="alt"></div> <div class="col-md-3 col-sm-3 col-xs-6 item"><img src="img/6.jpg" alt="alt"></div> <div class="col-md-3 col-sm-3 col-xs-6 item"><img src="img/7.jpg" alt="alt"></div> <div class="col-md-3 col-sm-3 col-xs-6 item"><img src="img/8.jpg" alt="alt"></div> <div class="col-md-3 col-sm-3 col-xs-6 item"><img src="img/9.jpg" alt="alt"></div> <div class="col-md-3 col-sm-3 col-xs-6 item"><img src="img/10.jpg" alt="alt"></div> <div class="col-md-3 col-sm-3 col-xs-6 item"><img src="img/11.jpg" alt="alt"></div> <div class="col-md-3 col-sm-3 col-xs-6 item"><img src="img/12.jpg" alt="alt"></div> </div> </div> </div> |
Сделаем стилизацию css для картинок
- Сперва уберем отступы по бокам padding: 0 у класса masonry.
- Дальше размер картинки .item img делаем размер сто процентов width: 100%, чтобы их видеть целиком.
- Чтобы item занимали три картинки на весь экран, зададим свойство height: 33.34vh.
|
1 2 3 4 5 6 |
.masonry padding: 0 .item height: 33.34vh .item img width: 100% |
Добавим код в common.js
Берем переменную masonry, в которую включены все item.
После того как все картинки загрузятся masonry плагин делает разметку с помощью imagesLoaded.
Когда сформировались картинки задаются правила.
Так как картинки разных размеров они будут разрознено.
Что бы все изображения поставить в один ряд выровнять воспользуемся плагином imagefill , на сайте видно как он работает в демо ролике.
Смысл не главное, какой ширины или высоты колонка изображение подстроится, чтобы занять всю область.
Добавим параметр как на сайте в скрипт $(.item).imagefill ().
Результат работы в браузере.
Скрипт common.js.
|
1 2 3 4 5 6 7 8 9 10 |
$(function() { var $container = $(".masonry"); $container.imagesLoaded(function () { $container.masonry({ columnWidth: ".item", itemSelector: ".item" }); $('.item').imagefill(); }); }); |