我正在尝试以表格样式堆叠图像,购买它必须具有响应能力和无限滚动。
这意味着图像的宽度应介于 100 像素和 200 像素之间,并且列数应相应地适合。
我曾尝试使用列 (css3),但是当添加更多图像(无限滚动)时,它会将图像添加到最后一列(而不是底行。
所以接下来的尝试是做 float:left;并且除了右边的白边外效果很好。
限制:
- 没有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;
}
最佳答案
要实现具有无限滚动功能的 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 (例如,响应式样式很粗糙)
注意内联 block 和行为不同于 css3 列。当使用 css3 列时,元素将按从左到右指定的列数垂直堆叠。使用内联 block 时,元素将从右到左排列在行中。每行的高度将是该行中最高元素的高度。
关于css - 仅使用 css3 的 pinterest 样式图像布局(包括无限滚动),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22531666/