uniapp 瀑布流图片布局

效果

7e4310ee64ff24e73c27f866a63d170.jpg

export default {
        data() {
            return {
                // 图片列表
                list: [
                    {
                        src:"/static/01.JPG"
                    },
                    {
                        src:"/static/12.JPG"
                    },
                    {
                        src:"/static/03.JPG"
                    },
                    {
                        src:"/static/04.JPG"
                    },
                    {
                        src:"/static/05.PNG"
                    },
                    {
                        src:"/static/06.PNG"
                    }
                ],
                // 初始化左右盒子
                leftList: [],
                rightList: [],
                // 初始化左右盒子高度
                leftH: 0,
                rightH: 0
            }
        },
        onLoad() {
            this.doList()
        },
        methods: {
            doList() {
                const that = this
                this.list.forEach(res => {
                    // 获取图片宽高
                    uni.getImageInfo({
                        src: res.src,
                        success: (image) => {
                            console.log(res.src)
                            // 计算图片渲染高度
                            let showH = (50 * image.height) / image.width
                            // 判断左右盒子高度
                            if(that.leftH <= that.rightH) {
                                that.leftList.push(res)
                                that.leftH += showH
                            } else {
                                that.rightList.push(res)
                                that.rightH += showH
                            }
                        }
                    })
                })
            }
        }
    }

.container {
            padding: 0 24rpx;
            font-size: 14rpx;
            line-height: 24rpx;
            display: flex;
            justify-content: space-between;
        .right, .left{
            display: inline-block;
            width: 340rpx;
            vertical-align: top;
        }
        .left image, .right image{
            border-radius: 16rpx;
            width: 100%;
            margin-bottom: 24rpx;
        }
}