什么是瀑布流布局?
瀑布流布局是当下比较流行的一种网站页面布局，在网络上随处可见，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动不断加载数据块并附加到当前尾部。比如：
某书页面
瀑布流布局的方式
（若还没有学习JavaScript就先不看）
综上，初学者看的话可以先忽略JavaScript的部分，先熟练掌握使用column-count和column-gap来实现瀑布流布局。通俗来说就是通过写CSS设置内容的列数column-count、间隔的宽度column-gap以达到瀑布流的布局。如下：
body{
margin: 0;
padding: 0;
height: 5000px;
}
.waterfall{
width: 100%;
column-count: 4;
column-gap: 10px;
column-width: 10px;
position: relative;
}
.item{
box-shadow:5px 5px 5px rgba(51,51,51,0.7); /*阴影*/
padding: 10px 10px 10px;
}
.item img{
width: 100%;
border-radius: 5px;
}
.item::before {
content: "Title 1";
position: absolute;
color: aliceblue;
margin-left: 10px;
margin-top: 20px;
font-size: 25px;
}
.item::after {
content: "#tag1";
position: relative;
border-radius: 10px;
background-color: rgba(243, 240, 240, 0.5);
top: -50px;
left: 20px;
font-size: 25px;
}
效果如下：
欢迎大家观看及指出不足🤗
