Pinterest风格的图像布局，仅使用css3(包括无限滚动)

Question

我正在尝试在表格样式中堆叠图像，但它必须具有响应性和无限滚动

这意味着图像的宽度应该在100px到200px之间，并且相应的列数应该适合。

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

所以下一个尝试是执行float:left;除了右边的白色边距外，效果很好。

限制:

1. No 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 */
}

这是一个完整的工作小提琴(响应式样式只是粗糙的例子)

http://jsfiddle.net/ye69U/

注意内联块和行为不同于css3列。当使用css3列时，项目将按照从左到右指定的列数垂直堆叠。当使用内联块时，项目将被定位为从右向左的行。其中每行的高度将是该行中最高元素的高度