Галерея изображений мозаики в CSS

Question

Я хочу сделать мозаичную галерею с чистым CSS, но я не могу думать о «логической стороне», мне нужен практический пример.

Можете ли вы вести меня?

Я видел этот пример , но я не понимаю, как этого добиться.

Вот пример того, что мне нужно: http://tmv.proto.jp/

Я хотел бы получить решение не-JQuery.

Answer 1

Сначала сделайте несколько div, чтобы они служили столбцами.Затем вы используете css, чтобы дать им ширину (процент для жидкости, px для фиксированной) и плавать их влево.Во-вторых, присвойте всем вашим изображениям ширину 100% в css и распределите их по столбцам.

Пример (не проверено):

HTML:

<div class='col'>
    <img />
    <img />
    <img />
</div>

<div class='col'>
    <img />
    <img />
    <img />
</div>

CSS:

.col{
    width:50%;
    float:left;
}

img{
    width:100%;
}