竖向瀑布流
瀑布流以竖向为主，有多种实现方式，常见的有：multi-column、grid、Flexbox三种方式。
下面将以如下代码演示三种方式的基本使用。
html
<!-- 统一样式 -->
<style>
.item1{
height: 120px;
background: rgb(203, 38, 209);
}
.item2{
height: 140px;
background: rgb(209, 198, 38);
}
.item3{
height: 160px;
background: rgb(144, 209, 38);
}
.item4{
height: 140px;
background: rgb(38, 141, 209);
}
.item5{
height: 100px;
background: rgb(209, 38, 81);
}
.item6{
height: 170px;
background: rgb(49, 38, 209);
}
.item7{
height: 150px;
background: rgb(209, 192, 38);
}
.item8{
height: 120px;
background: rgb(98, 38, 209);
}
.item9{
height: 120px;
background: rgb(144, 209, 38);
}
.item{
margin-bottom: 10px;
width: 100%;
text-align: center;
font-size: 36px;
color: #fff;
}
</style>
<!-- 所用元素及类名 -->
<body>
<div class="main">
<div class="item1 item">1</div>
<div class="item2 item">2</div>
<div class="item3 item">3</div>
<div class="item4 item">4</div>
<div class="item5 item">5</div>
<div class="item6 item">6</div>
<div class="item7 item">7</div>
<div class="item8 item">8</div>
<div class="item9 item">9</div>
</div>
</body>multi-column方式
从上到下排，简便但是无法体现优先级
基于上面示例所需加入的css代码如下
css
.main{
/* column实现 */
column-count: 3;
column-gap: 10px;
}
.item{
break-inside: avoid; /* 使元素不断开 */
}grid方式
从左到右排，一般需要借助js等方式产生伪css代码
基于上面示例所需加入的css代码如下
css
.main{
/* grid布局实现 */
display: grid;
/* 分为3行 */
grid-template-rows: 1fr 1fr 1fr;
/* 分为3列 */
grid-template-columns: 1fr 1fr 1fr;
/* 列间距5px */
column-gap: 5px;
}
.item{
grid-row-start:'auto';
}
.item1{
grid-row-end:span 12;
}
.item2{
grid-row-end:span 14;
}
.item3{
grid-row-end:span 16;
}
.item4{
grid-row-end:span 14;
}
.item5{
grid-row-end:span 10;
}
.item6{
grid-row-end:span 17;
}
.item7{
grid-row-end:span 15;
}
.item8{
grid-row-end:span 12;
}
.item9{
grid-row-end:span 12;
}实现思路：动态获取每个元素的高度，根据高度按照百分比设置其grid-row-end的值。
flexbox方式
从左到右排，一般需要借助js等方式产生伪css代码，推荐
flexbox方式的代码结构与上面有所区别，如下
html
<style>
.masonry {
/* 总容器 */
display: flex;
flex-direction: row;
}
.column {
/* 列容器 */
display: flex;
flex-direction: column;
}
.item {
margin-bottom: 10px;
width: 100px;
text-align: center;
font-size: 36px;
color: #fff;
}
.item1 {
height: 120px;
background: rgb(203, 38, 209);
}
.item2 {
height: 140px;
background: rgb(209, 198, 38);
}
.item3 {
height: 160px;
background: rgb(144, 209, 38);
}
.item4 {
height: 140px;
background: rgb(38, 141, 209);
}
.item5 {
height: 100px;
background: rgb(209, 38, 81);
}
.item6 {
height: 170px;
background: rgb(49, 38, 209);
}
.item7 {
height: 150px;
background: rgb(209, 192, 38);
}
.item8 {
height: 120px;
background: rgb(98, 38, 209);
}
.item9 {
height: 120px;
background: rgb(144, 209, 38);
}
</style>
<div class="masonry">
<!-- 第一列 -->
<div class="column">
<div class="item1 item">1</div>
<div class="item2 item">4</div>
<div class="item3 item">7</div>
</div>
<!-- 第二列 -->
<div class="column">
<div class="item4 item">2</div>
<div class="item5 item">5</div>
<div class="item6 item">8</div>
</div>
<!-- 第三列 -->
<div class="column">
<div class="item7 item">3</div>
<div class="item8 item">6</div>
<div class="item9 item">9</div>
</div>
</div>实现思路：把每一列的数据信息放在一个数组中，通过对数组依次赋值达到效果