FlexBox版本瀑布流
给你们展示一下我超强的画工,跟你们表达一下瀑布流的布局
如果你不懂Flex布局,那就直接copy代码, 简单粗暴
<div class="IndexBox">
<div class="itemBox">
<div class="item">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=163808881,4116372357&fm=26&gp=0.jpg" alt="" />
</div>
<div class="item">
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1705581946,4177791147&fm=26&gp=0.jpg" alt="" />
</div>
<div class="item">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2709747480,3075217881&fm=26&gp=0.jpg" alt="" />
</div>
<div class="item">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=824689201,906964956&fm=26&gp=0.jpg" alt="" />
</div>
<div class="item">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2853553659,1775735885&fm=26&gp=0.jpg" alt="" />
</div>
</div>
<div class="itemBox">
<div class="item">
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1705581946,4177791147&fm=26&gp=0.jpg" alt="" />
</div>
<div class="item">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2709747480,3075217881&fm=26&gp=0.jpg" alt="" />
</div>
<div class="item">
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3205631169,114798947&fm=15&gp=0.jpg" alt="" />
</div>
<div class="item">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=824689201,906964956&fm=26&gp=0.jpg" alt="" />
</div>
<div class="item">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2853553659,1775735885&fm=26&gp=0.jpg" alt="" />
</div>
</div>
<div class="itemBox">
<div class="item">
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3205631169,114798947&fm=15&gp=0.jpg" alt="" />
</div>
<div class="item">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=824689201,906964956&fm=26&gp=0.jpg" alt="" />
</div>
<div class="item">
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2151687143,2821671371&fm=26&gp=0.jpg" alt="" />
</div>
<div class="item">
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1830914723,3154965800&fm=26&gp=0.jpg" alt="" />
</div>
<div class="item">
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1177110542,2551344174&fm=26&gp=0.jpg" alt="" />
</div>
</div>
</div>
<style>
.IndexBox{
display:flex;
}
.itemBox{
display:flex;
flex-direction:column,
width: calc(100% / 3); //每一列占3分之一,具体自己计算自己需要的宽度,也可以用 flex:1,表示均分
}
.item{
margin-bottom: 15px;
}
</style>