Question

我正在尝试以桌面形式堆叠图像，购买它必须具有响应性和无限滚动。

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

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

所以接下来尝试做浮动：左;除了右边的白边之外，效果很好。

限制：

没有JS
CSS3只是很好完全响应（在调整大小时应该工作屏幕）
图片必须裁剪并居中（这就是我使用的原因背景图像）
新图片必须添加到底部

以下是我使用的示例代码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列时，项目将垂直堆叠在从左到右指定的列数中。使用内联块项时，将从右到左排成行。其中每行的高度将是该行中最高元素的高度。

仅使用css3的pinterest样式图像布局（包括无限滚动）

1 个答案: