CSS3中column多列的瀑布流效果

CSS3中column多列的瀑布流效果

html:

<div class="waterfall-container">
<div class="waterfall-item" style="height:100px">1</div>
<div class="waterfall-item" style="height:300px">2</div>
<div class="waterfall-item" style="height:400px">3</div>
<div class="waterfall-item" style="height:100px">4</div>
<div class="waterfall-item" style="height:300px">5</div>
<div class="waterfall-item" style="height:400px">6</div>
<div class="waterfall-item" style="height:400px">7</div>
<div class="waterfall-item" style="height:300px">8</div>
<div class="waterfall-item" style="height:700px">9</div>
<div class="waterfall-item" style="height:200px">10</div>
</div>

css:

body{
margin: 0;
}
.waterfall-container{
/* 分几列 */
column-count: 2;
width: 100%;
/* 列间距 */
column-gap: 10px;
}
.waterfall-item{
break-inside: avoid;
width: 100%;
height: 100%;
background-color: #ddd;
text-align: center;
color:#fff;
text-shadow: 0 0 3px rgba(0,0,0,0.5);
font-size: 40px;
margin-bottom: 10px;
column-gap: 0;
}
.waterfall-item:nth-child(1){background-image: url('./img/1.jpg');}
.waterfall-item:nth-child(2){background-image: url('./img/2.jpg');}
.waterfall-item:nth-child(3){background-image: url('./img/3.jpg');}
.waterfall-item:nth-child(4){background-image: url('./img/4.jpg');}
.waterfall-item:nth-child(5){background-image: url('./img/5.jpg');}
.waterfall-item:nth-child(6){background-image: url('./img/6.jpg');}
.waterfall-item:nth-child(7){background-image: url('./img/7.jpg');}
.waterfall-item:nth-child(8){background-image: url('./img/8.jpg');}
.waterfall-item:nth-child(9){background-image: url('./img/9.jpg');}
.waterfall-item:nth-child(10){background-image: url('./img/10.jpg');}