uniapp瀑布流布局

使用弹性盒子实现瀑布流布局

最后效果

image.png

直接上代码
html

<view class="tan-main-wrap">
    <view class="tan-list-box">
        <view class="tan-img-pic"><image src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2293895315,941305116&fm=15&gp=0.jpg" mode="widthFix"></image></view>
        <view class="tan-list-title">
         草莓
        </view>
    </view>
    <view class="tan-list-box">
        <view class="tan-img-pic"><image src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg" mode="widthFix"></image></view>
        <view class="tan-list-title">
        香蕉
        </view>
    </view>
    <view class="tan-list-box">
        <view class="tan-img-pic"><image src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3571319963,2190929172&fm=26&gp=0.jpg" mode="widthFix"></image></view>
        <view class="tan-list-title">
            杨桃
        </view>
    </view>
    <view class="tan-list-box">
        <view class="tan-img-pic"><image src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2356795443,149489428&fm=26&gp=0.jpg" mode="widthFix"></image></view>
        <view class="tan-list-title">
           车厘子
        </view>
    </view>
    <view class="tan-list-box">
        <view class="tan-img-pic"><image src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=201658450,2328203442&fm=26&gp=0.jpg" mode="widthFix"></image></view>
        <view class="tan-list-title">
          苹果
        </view>
    </view>
    <view class="tan-list-box">
        <view class="tan-img-pic"><image src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1572231494,1459024433&fm=26&gp=0.jpg" mode="widthFix"></image></view>
        <view class="tan-list-title">
       橙子
        </view>
    </view>
</view>

css

.tan-main-wrap{
  display: flex;  
  flex-flow:column wrap;
  height: 100Vh;
width: 100vw;
}
.tan-list-box{
  margin: 10rpx;
  width: calc(100% / 2 - 20rpx);
  background-color: #f5f5f5;
  border-radius: 8px;
  
  overflow: hidden;
}
.tan-img-pic{
  width: 100%;
 
}
.tan-img-pic>image{
  width: 100%;
  height: 100%;
}
.tan-list-title{
  margin: 20rpx;
  font-size: 30rpx;
}