css - 仅使用 css3 的 pinterest 样式图像布局(包括无限滚动)

Question

我正在尝试以表格样式堆叠图像，购买它必须具有响应能力和无限滚动。

这意味着图像的宽度应介于 100 像素和 200 像素之间，并且列数应相应地适合。

我曾尝试使用列 (css3)，但是当添加更多图像(无限滚动)时，它会将图像添加到最后一列(而不是底行。

所以接下来的尝试是做 float:left;并且除了右边的白边外效果很好。

限制:

1. 没有JS
2. 只有 CSS3 很好完全响应(调整大小时应该工作屏幕)
3. 图像必须经过裁剪并居中(这就是我使用背景图片)
4. 必须在底部添加新图片

这是我使用的示例代码 http://jsfiddle.net/SsTZe/9/ :

.imgDiv {
    background-image: url('http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png');
    background-size: cover;
    background-position: center center;
   // min-width: 100px;
   // max-width:200px;
    width:200px;
    height: 100px;
    float:left;
    border:solid 1px;
}

Answer 1

要实现具有无限滚动功能的 Pinterest 样式布局，您必须使用 javascript。您使用 css3 列概述的问题就是原因。两个流行的 jQuery 库是

砌体 - http://masonry.desandro.com/

和

同位素 - http://isotope.metafizzy.co/

如果你想要一个更简单的图像列布局，你可以使用 css 属性 inline-block

CSS

.item{
   display:inline-block;
   width:25%; /* ~25% width of each item so in this case 4 columns */
}

这是一个完整的工作 fiddle (例如，响应式样式很粗糙)

http://jsfiddle.net/ye69U/

注意内联 block 和行为不同于 css3 列。当使用 css3 列时，元素将按从左到右指定的列数垂直堆叠。使用内联 block 时，元素将从右到左排列在行中。每行的高度将是该行中最高元素的高度。