css实现瀑布流效果

最新推荐文章于 2024-05-02 17:59:48 发布

背着吉他的蝙蝠女侠

最新推荐文章于 2024-05-02 17:59:48 发布

阅读量576

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/echokkk/article/details/78656656

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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

收藏

觉得还不错? 一键收藏
1
评论
css实现瀑布流效果

css实现瀑布流的效果是使用的多列布局来实现的，其中column-width表示的是每一列的宽度，column-gap表示每一列的间距，因为是css3的属性，为了处理兼容性问题，记得在前面加上各大浏览器的私有前缀。瀑布流实现的代码如下：注意：使用的图片的宽度是一致的。图片可以自己百度自行几张，然后使用画图工具修改宽度就可以，让高度自己随宽度进行调整。 Document .
复制链接

扫一扫

专栏目录