uni-app瀑布流

<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>