uni-app图片瀑布流布局-弹性盒子

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

直接上代码
html

<view class="tan-main-wrap">
    <view class="tan-list-box">
        <view class="tan-img-pic"><image src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1743338427,2200622767&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://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://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1906469856,4113625838&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://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1141259048,554497535&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://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3892521478,1695688217&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://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1089874897,1268118658&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;
}
.tan-list-box{
    margin: 10rpx;
    width: calc(100% / 2 - 20rpx);
    background-color: #f5f5f5;
    border-radius: 8px;
    
    overflow: hidden;
}
.tan-img-pic{
    width: 100%;
    image{
        width: 100%;
        height: 100%;
    }
}
.tan-list-title{
    margin: 20rpx;
    font-size: 30rpx;
}

最后的效果

image.png