css实现瀑布流效果

来源：互联网发布：js获取身份证号码编辑：程序博客网时间：2024/06/10 09:00

css实现瀑布流的效果是使用的多列布局来实现的，其中column-width表示的是每一列的宽度，column-gap表示每一列的间距，因为是css3的属性，为了处理兼容性问题，记得在前面加上各大浏览器的私有前缀。瀑布流实现的代码如下：

注意：使用的图片的宽度是一致的。图片可以自己百度自行下载几张，然后使用画图工具修改宽度就可以，让高度自己随宽度进行调整。后期会更新使用js或者jq实现的瀑布流效果。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>.container {column-width: 250px;/* 列的宽度 */column-gap: 5px; /* 列的间距 */}.contianer>div {width: 250px;margin: 5px;}</style></head><body><div class="container"><div><img src="1.jpg"></div><div><img src="2.jpg"></div><div><img src="3.jpg"></div><div><img src="4.jpg"></div><div><img src="5.jpg"></div><div><img src="6.jpg"></div><div><img src="7.jpg"></div><div><img src="8.jpg"></div><div><img src="9.jpg"></div><div><img src="1.jpg"></div><div><img src="2.jpg"></div><div><img src="3.jpg"></div><div><img src="4.jpg"></div><div><img src="5.jpg"></div><div><img src="6.jpg"></div><div><img src="7.jpg"></div><div><img src="8.jpg"></div><div><img src="9.jpg"></div><div><img src="1.jpg"></div><div><img src="2.jpg"></div><div><img src="3.jpg"></div><div><img src="4.jpg"></div><div><img src="5.jpg"></div><div><img src="6.jpg"></div><div><img src="7.jpg"></div><div><img src="8.jpg"></div><div><img src="9.jpg"></div></div></body></html>

阅读全文

0 0