html标签格式
<div class="item">
<img src="banner.jpg" alt="" />
</div>
</div>
一、flex 弹性布局实现瀑布流
.box {
display: flex;
flex-flow:column wrap;
height: 100vh;
}
.item {
margin: 10px;
width: calc(100%/3 - 20px); //这里要展示几列就除于几
}
.item img{
width: 100%;
height:100%;
}
二、column 多行布局实现瀑布流
.box {
margin: 10px;
column-count: 3;
column-gap: 10px;
}
.item {
margin-bottom: 10px;
}
.item img{
width: 100%;
height:100%;
}