图片地址需自己替换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流实例</title>
<style type="text/css">
.intr{
font-family: Microsoft yahei;
-webkit-column-count: 3;
-webkit-column-gap: 2em;
-webkit-column-rule: 1px #000000 solid;
}
.container{
100%;
}
.main{
-webkit-column-count: 4;
-webkit-column-gap: 1em;
}
.text{
border: 1px solid gray;
-webkit-column-break-inside: avoid;
padding: 1em;
margin: 0 0 1em 0;
}
.text img{
margin-bottom: 1em;
}
</style>
<script type="text/javascript"></script>
</head>
<body>
<p class="intr">css3的瀑布流布局是基于column属性的延伸实现的。其中column-count是指被分割的列数，column-gap属性是指列间距，column-rule类似于border属性，但他不占用任何空间位置。还有其他属性也要自己了解！</p>
<div class="container">
<div class="main">
<div class="text">
<img src="image/海大星.jpg">
<p>海大星的幸福生活</p>
</div>
<div class="text">
<img src="image/海大星.jpg">
<p>海大星的幸福生活</p>
</div>
<div class="text">
<img src="image/海大星.jpg">
<p>海大星的幸福生活</p>
</div>
<div class="text">
<img src="image/海大星.jpg">
<p>海大星的幸福生活</p>
</div>
<div class="text">
<img src="image/海大星.jpg">
<p>海大星的幸福生活</p>
</div>
<div class="text">
<img src="image/海大星.jpg">
<p>海大星的幸福生活</p>
</div>
<div class="text">
<img src="image/海大星.jpg">
<p>海大星的幸福生活</p>
</div>
<div class="text">
<img src="image/海大星.jpg">
<p>海大星的幸福生活</p>
</div>
<div class="text">
<img src="image/海大星.jpg">
<p>海大星的幸福生活</p>
</div>
<div class="text">
<img src="image/海大星.jpg">
<p>海大星的幸福生活</p>
</div>
</div>
</div>
</body>
</html>