由於工作需要，今天嘗試用純css實現了一下瀑布流的佈局，實現的原理是利用多欄佈局配合break-inside屬性，此種方式的實現代碼非常簡單，也不需要依賴任何插件，下面 先看一下實現的效果圖：
下面貼上實現代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<style type="text/css">
* {
margin: 0px;
height: 0px;
}
.flow-box{
column-count:4;
column-gap: 15px;
width: 100%;
}
div {
width: 300px;
float: left;
break-inside: avoid;
box-sizing: border-box;
margin: 10px;
}
#div1 {
background: #4682B4;
height: 100px;
}
#div2 {
background: #4452B4;
height: 350px;
}
#div3 {
background: #4696B4;
height: 250px;
}
#div4 {
background: #4232B4;
height: 180px;
}
#div5 {
background: #7882B4;
height: 100px;
}
#div6 {
background: #4656B4;
height: 250px;
}
#div7 {
background: #4082B4;
height: 300px;
}
#div8 {
background: #468267;
height: 120px;
}
#div9 {
background: #463454;
height: 180px;
}
#div10 {
background: #8982B4;
height: 220px;
}
</style>
</head>
<body>
<section class="flow-box">
<div id="div1">1</div >
<div id="div2">2</div >
<div id="div3">3</div >
<div id="div4">4</div >
<div id="div5">5</div >
<div id="div6">6</div >
<div id="div7">7</div >
<div id="div8">8</div >
<div id="div9">9</div >
<div id="div10">10</div >
</section>
</body>
</html>
遺憾的是由於break-inside屬性的兼容性不好，在不支持此屬性的瀏覽器下面，就出不來瀑布流的效果了。
更多其他方式的實現瀑布流可以參考下面的鏈接： https://www.w3cplus.com/css/pure-css-create-masonry-layout.html