Адаптивная галерея Mosaic Flow

Адаптивная галерея для сайта со структурой в виде сетки (Аналог Pinterest).

Как реализовать:

Все очень даже минималистично и просто:

1. Стили CSS

.mosaicflow__column {
float:left;
}
.mosaicflow__item img {
display:block;
width:100%;
height:auto;
}

2. Подключаем библиотеку jQuery и Javascript самой галереи:

<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:

<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>

Готово!

delux

Предлагаю делиться опытом в сфере сайтостроения!

Читайте также:

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.