css图片瀑布流
时间: 2023-07-25 14:06:37 浏览: 48
实现图片瀑布流的一种常用方法是使用CSS3的column-count属性和column-width属性,将图片容器分成多列,然后利用绝对定位将每张图片定位到对应的列中。
以下是一个示例代码:
HTML代码:
```
<div class="image-container">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
<img src="image4.jpg">
<img src="image5.jpg">
<img src="image6.jpg">
<img src="image7.jpg">
<img src="image8.jpg">
<img src="image9.jpg">
</div>
```
CSS代码:
```
.image-container {
column-count: 3; /* 将图片容器分成3列 */
column-width: 300px; /* 每列宽度为300px */
}
.image-container img {
width: 100%; /* 图片宽度占满列宽 */
margin-bottom: 10px; /* 图片之间留下一些间距 */
position: absolute; /* 将图片绝对定位 */
}
.image-container img:nth-child(odd) {
left: 0; /* 奇数列的图片左对齐 */
}
.image-container img:nth-child(even) {
right: 0; /* 偶数列的图片右对齐 */
}
```
这样就可以实现一个简单的图片瀑布流效果了。需要注意的是,由于绝对定位会使图片脱离文档流,因此需要在容器上设置高度,以保证容器能够包含所有图片。另外,由于column-count属性和column-width属性是CSS3属性,因此在一些老旧的浏览器中可能无法正常工作。