uniapp小程序实现瀑布流布局的思路与代码

// component/waterfall.vue
<template>
    <view class="waterfall">
        <view hidden>
            // 用JS原生实现时可以直接用for循环插入，然后获取列高度
            // 这里通过载入图片调用方法， 默认传参带有图片信息，可以获得图片高度
            <block v-for(item in imgList" :key="item.id">
                <image :src="item.url" @load="loadImg" ></iamge>
            </block>
        </view>
        <view class="list" v-for="(list, key) in waterfall" :key="key">
            <navigator url="https://www.baidu.com" v-for="item in list.list" :key="item.id">
                <image :src="item.url" mode="widthFix"></image>
                <view class="shop-info">
                    /* 标题等信息，略 */
                </view>
            </navigator>
        </view>
    </view>
</template>

<script>
    export default {
        // 抽出为单独的组件，所以数据来源于父组件传递，也可以是当前组件请求API
        props: { imgList: Array },
        data(){
            return {
                lists: [], // 备份imgList用的数组，方便操作
                waterfall: [
                    // 用于记录当前列的高度，不在方法中保存是为了上拉获取新数据也能使用
                    // 因为默认手机显示，可以固定两列
                    // 如果是做自适应或者电脑端多列，可以动态插入实现多列
                    {
                        height: 0, 
                        list: []
                    },{
                        height: 0, 
                        list: []
                    }
                ]
            }
        },
        created(){
            this.lists = this.imgList; // Vue创建data后立即备份
        },
        watch(){
            // 监听数据源，如果有新值传入，则用lists数组备份
            imgList(data){ data.length && this.lists.push(...data); }
        },
        methods: {
            loadImg(ev){
                let Root = this.waterfall;
                let height = e.detail.height;
                // 根据当前高度决定将新数据给谁，并更新列高度；优先插入左侧
                if(Root[0].height <= Root[1].height){
                    // 考虑热度优先的问题， 所以用的是shift()方法推出头部数据。
                    Root[0].list.push(this.lists.shift())
                    Root[0].height += height;
                } else {
                    Root[1].list.push(this.lists.shift())
                    Root[1].height += height;
                }
            }
        }
    }
</script>