.HTML
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>瀑布流</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div><img src="images/1.jpg">
<p>美景安静</p></div>
<div><img src="images/2.jpg"></div>
<div><img src="images/3.jpg"></div>
<div><img src="images/4.jpg"></div>
<div><img src="images/5.jpg"></div>
<div><img src="images/6.jpg"></div>
<div><img src="images/7.jpg"></div>
<div><img src="images/8.jpg"></div>
<div><img src="images/9.jpg"></div>
<div><img src="images/1.jpg"></div>
<div><img src="images/2.jpg"></div>
<div><img src="images/3.jpg"></div>
<div><img src="images/4.jpg"></div>
<div><img src="images/5.jpg"></div>
<div><img src="images/6.jpg"></div>
<div><img src="images/7.jpg"></div>
<div><img src="images/8.jpg"></div>
<div><img src="images/9.jpg"></div>
<div><img src="images/1.jpg"></div>
<div><img src="images/2.jpg"></div>
<div><img src="images/3.jpg"></div>
<div><img src="images/4.jpg"></div>
<div><img src="images/5.jpg"></div>
<div><img src="images/6.jpg"></div>
<div><img src="images/7.jpg"></div>
<div><img src="images/8.jpg"></div>
<div><img src="images/9.jpg"></div>
</div>
</body>
</html>
.CSS
.container{
column-width: 200px;
-webkit-column-width:200px ;
/*column-count: 3;*/
-moz-column-gap:5px ;
-webkit-column-gap: 5px;
column-gap: 5px;
}
.container div{
width: 250px;
margin: 5px;
}
p{
text-align: center;
}
在浏览器中显示的效果