纯css实现瀑布流效果

最新推荐文章于 2024-05-03 22:21:39 发布

loyal98

最新推荐文章于 2024-05-03 22:21:39 发布

阅读量268

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_39048609/article/details/77873960

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>纯CSS3实现的瀑布流</title>
	<link type="text/css" rel="stylesheet" href="css/waterfall.css" />
</head>
<body>
	<div class="container">
		<div><img src="images/P_00.jpg" /></div>
		<div><img src="images/P_01.jpg" /></div>
		<div><img src="images/P_02.jpg" /></div>
		<div><img src="images/P_03.jpg" /></div>
		<div><img src="images/P_04.jpg" /></div>
		<div><img src="images/P_05.jpg" /></div>
		<div><img src="images/P_06.jpg" /></div>
		<div><img src="images/P_07.jpg" /></div>
		<div><img src="images/P_08.jpg" /></div>
		<div><img src="images/P_09.jpg" /></div>
		<div><img src="images/P_010.jpg" /></div>
		<div><img src="images/P_011.jpg" /></div>
		<div><img src="images/P_012.jpg" /></div>
		<div><img src="images/P_013.jpg" /></div>
		<div><img src="images/P_014.jpg" /></div>
		<div><img src="images/P_015.jpg" /></div>
		<div><img src="images/P_016.jpg" /></div>
		<div><img src="images/P_017.jpg" /></div>
		<div><img src="images/P_018.jpg" /></div>
		<div><img src="images/P_019.jpg" /></div>
		<div><img src="images/P_05.jpg" /></div>
		<div><img src="images/P_06.jpg" /></div>
		<div><img src="images/P_07.jpg" /></div>
		<div><img src="images/P_08.jpg" /></div>
		<div><img src="images/P_09.jpg" /></div>
		<div><img src="images/P_010.jpg" /></div>
		<div><img src="images/P_011.jpg" /></div>
		<div><img src="images/P_012.jpg" /></div>
		<div><img src="images/P_013.jpg" /></div>
		<div><img src="images/P_05.jpg" /></div>
		<div><img src="images/P_06.jpg" /></div>
		<div><img src="images/P_07.jpg" /></div>
		<div><img src="images/P_08.jpg" /></div>
		<div><img src="images/P_09.jpg" /></div>
		<div><img src="images/P_010.jpg" /></div>
		<div><img src="images/P_011.jpg" /></div>
		<div><img src="images/P_012.jpg" /></div>
		<div><img src="images/P_013.jpg" /></div>
		<div><img src="images/P_03.jpg" /></div>
		<div><img src="images/P_04.jpg" /></div>
		<div><img src="images/P_05.jpg" /></div>
		<div><img src="images/P_06.jpg" /></div>
		<div><img src="images/P_07.jpg" /></div>
		<div><img src="images/P_08.jpg" /></div>
		<div><img src="images/P_09.jpg" /></div>
	</div>
</body>
</html>

css：

.container{
    -webkit-column-width:160px;
    -moz-column-width:160px; 
	  -webkit-column-gap:5px;
	  -moz-column-gap:5px;
}


/*数据块 砖块*/

.container div{width:160px;
               margin:4px 0;}