CSS 中的马赛克图片库

Question

我想用纯CSS做一个马赛克画廊，但是我想不出“逻辑端”，我需要一个实际的例子。

你能指导我吗？

见过this example，但是不明白怎么实现。

这是我需要的示例：http://tmv.proto.jp/

我想要一个非 jQuery 解决方案。

Answer 1

首先，制作一些 div 作为列。然后你使用 css 给它们一个宽度（流体的百分比，固定的 px）并将它们向左浮动。 其次，在 css 中为所有图像设置 100% 的宽度，并将它们分布在列中。

示例（未经测试）：

HTML：

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

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

CSS：

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

img{
    width:100%;
}