版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>瀑布流布局</title>
</head>
<style>
.box {
height:123px;
padding:1em;
margin-top:1em;
-moz-page-break-inside:avoid;
-webkit-column-break-inside:avoid;
break-inside:avoid;
border:1px solid #000;
background:#909090;
}
.spe {
height:225px;
}
.box-wrapper {
-moz-column-count:4;
/* Firefox */
-webkit-column-count:4;
/* Safari 和 Chrome */
column-count:4;/*列数*/
-moz-column-gap:1em;
-webkit-column-gap:1em;
column-gap:1em;
}
</style>
</head>
<body>
<div class="box-wrapper">
<div style="margin-top:0px" class="box"></div>
<div class="box spe"></div>
<div class="box spe"></div>
<div class="box spe"></div>
<div class="box spe"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box spe"></div>
<div class="box spe"></div>
</div>
</body>
</html>效果图
