实现思路

获取父组件的列表数组，watch监听数组长度变化，截取后面新的数据，创建两个左右数组，比较左右dom的长度，哪个短，就push一条数据进去，源数组删除一条数据。利用img的load（加载成功）和error方法（加载失败），触发数组的push，实现瀑布流

代码实现

<template>
    <view class="waterfall">
        <view class="waterfall_left">
            <view class="waterfall_list" v-for="(item, index) in leftList" :key="index">
                <Search
                    :name="item.name"
                    :image="item.src"
                    :label="item.label"
                    :item="item"
                    @considerPush="considerPush"
                >
                </Search>
            </view>
        </view>
        <view class="waterfall_right">
            <view class="waterfall_list" v-for="(item, index) in rightList" :key="index">
                <Search
                    :name="item.name"
                    :image="item.src"
                    :label="item.label"
                    :item="item"
                    @considerPush="considerPush"
                >
                </Search>
            </view>
        </view>
    </view>
</template>

<script>
import Search from '@/components/search/search.vue';
export default {
    components: { Search },
    props: {
        list: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            // 左侧列表
            leftList: [],
            // 右侧列表
            rightList: [],
            // 组件数据备份
            newList: [],
            //默认请求数,主要为了正常排序
            interceptNumber: 10
        };
    },
    created() {
        this.touchOff(); // 触发排列
    },
    mounted() {},
    watch: {
        list(newValue, oldValue) {
            this.interceptNumber = newValue.length - oldValue.length;
            this.touchOff();
        }
    },
    computed: {},
    methods: {
        // 触发重新排列
        touchOff() {
            this.newList = [...this.list.slice(-this.interceptNumber)];
            if (this.newList.length !== 0) {
                this.leftList.push(this.newList.shift()); //触发排列
            }
        },
        // 计算排列
        considerPush() {
            this.$nextTick(() => {
                if (this.newList.length == 0) return; //没有数据了
                let leftH = 0;
                let rightH = 0; //左右高度
                let query = uni.createSelectorQuery().in(this);
                query.selectAll('.waterfall_left').boundingClientRect();
                query.selectAll('.waterfall_right').boundingClientRect();
                query.exec(res => {
                    leftH = res[0].length != 0 ? res[0][0].height : 0; //防止查询不到做个处理
                    rightH = res[1].length != 0 ? res[1][0].height : 0;
                    if (leftH == rightH || leftH < rightH) {
                        // 相等 || 左边小
                        this.leftList.push(this.newList.shift());
                    } else {
                        // 右边小
                        this.rightList.push(this.newList.shift());
                    }

                    // console.log('左右高度：', leftH, rightH, leftH == rightH || leftH < rightH);
                });
            });
        }
    }
};
</script>

<style scoped lang="scss">
.waterfall {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    .waterfall_left {
        flex: 1;
    }

    .waterfall_right {
        flex: 1;
    }
}
</style>