Адаптивная галерея Mosaic Flow
Адаптивная галерея для сайта со структурой в виде сетки (Аналог Pinterest).
Как реализовать:
Все очень даже минималистично и просто:
1. Стили CSS
|
1 2 3 4 5 6 7 8 |
.mosaicflow__column { float:left; } .mosaicflow__item img { display:block; width:100%; height:auto; } |
2. Подключаем библиотеку jQuery и Javascript самой галереи:
|
1 2 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="jquery.mosaicflow.min.js"></script> |
3. Разметка HTML:
|
1 2 3 4 5 |
<div class="clearfix mosaicflow"> <div class="mosaicflow__item"><img width="500" height="300" src="1.jpg" alt=""> </div> <div class="mosaicflow__item"> <img width="500" height="500" src="2.jpg" alt=""> </div> … </div> |
Готово!
