微信小程序实战，基于vue2实现瀑布流

1、什么是瀑布流呢？

瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。

瀑布流对于图片的展现，是高效而具有吸引力的，用户一眼扫过的快速阅读模式可以在短时间内获得更多的信息量,而瀑布流里懒加载模式又避免了用户鼠标点击的翻页操作，瀑布流的主要特性便是错落有致，定宽而不定高的设计让页面区别于传统的矩阵式图片布局模式，巧妙的利用视觉层级，视线的任意流动又缓解了视觉疲劳，同时给人以不拘一格的感觉，切中年轻一族的个性化心理。

下面这些就是用瀑布流来实现，看起来是不是很美观呢？

2、实现一个简单的瀑布流

先看一下咱们最终的试下效果吧，只是简单传入文字进行演示

1、瀑布流的特点

1、琳琅满目：整版以图片为主，大小不一的图片按照一定的规律排列。

2、唯美：图片的风格以唯美的图片为主。

3、操作简单：在浏览网站的时候只需要轻轻滑动一下鼠标滚轮，一切的美妙的图片精彩便可呈现在你面前

2、核心算法

通过图片我们可以直观的看到，每一个卡片的高度都是不一样的，需要我们实时能计算高度，同时左右的高度还是不能相互影响。

这里我们主要通过两个数组进行实现，即分为左右数组，核心代码如下：

<view id="u-left-column" class="u-column">
    <slot name="left" :leftList="leftList"></slot>
</view>
<view id="u-right-column" class="u-column">
    <slot name="right" :rightList="rightList"></slot>
</view>

data() {
    return {
        leftList: [],
        rightList: [],
        tempList: [],
        scrollTop: 0,
    }
}

对传入数组进行分组和计算高度

async splitData() {
    if (!this.tempList.length) return;
    let leftRect = await this.$uGetRect('#u-left-column');
    let rightRect = await this.$uGetRect('#u-right-column');
    // 如果左边小于或等于右边，就添加到左边，否则添加到右边
    let item = this.tempList[0];
    // 解决多次快速上拉后，可能数据会乱的问题，因为经过上面的两个await节点查询阻塞一定时间，加上后面的定时器干扰
    // 数组可能变成[]，导致此item值可能为undefined
    if (!item) return;
    if (leftRect.height < rightRect.height) {
        this.leftList.push(item);
    } else if (leftRect.height > rightRect.height) {
        this.rightList.push(item);
    } else {
        // 这里是为了保证第一和第二张添加时，左右都能有内容
        // 因为添加第一张，实际队列的高度可能还是0，这时需要根据队列元素长度判断下一个该放哪边
        if (this.leftList.length <= this.rightList.length) {
            this.leftList.push(item);
        } else {
            this.rightList.push(item);
        }
    }
    // 移除临时列表的第一项
    this.tempList.splice(0, 1);
    // 如果临时数组还有数据，继续循环
    if (this.tempList.length) {
        this.splitData();
        return
    }
}

3、完整的组件代码如下

<template>
    <scroll-view class="scroll-y" scroll-y="true" @scrolltolower="tolower" :scroll-top="scrollTop">
        <view class="u-waterfall" id="list">
            <view id="u-left-column" class="u-column">
                <slot name="left" :leftList="leftList"></slot>
            </view>
            <view id="u-right-column" class="u-column">
                <slot name="right" :rightList="rightList"></slot>
            </view>
        </view>
    </scroll-view>
</template>

<script>
    export default {
        name: "waterfall",
        props: {
            value: {
                // 瀑布流数据
                type: Array,
                required: true,
                default: function() {
                    return [];
                }
            },
            scrolltolower: {
                type: Function,
                default: () => {}
            }
        },
        data() {
            return {
                leftList: [],
                rightList: [],
                tempList: [],
                scrollTop: 0,
            }
        },
        watch: {
            copyFlowList(nVal, oVal) {
                this.tempList = this.cloneData(this.copyFlowList);
                this.splitData();
            }
        },
        mounted() {
            this.tempList = this.cloneData(this.copyFlowList);
            this.splitData();
            // this.$on('clearWaterFall', this.clear)
        },
        computed: {
            // 破坏flowList变量的引用，否则watch的结果新旧值是一样的
            copyFlowList() {
                return this.cloneData(this.value);
            }
        },
        methods: {
            async splitData() {
                if (!this.tempList.length) return;
                let leftRect = await this.$uGetRect('#u-left-column');
                let rightRect = await this.$uGetRect('#u-right-column');
                // 如果左边小于或等于右边，就添加到左边，否则添加到右边
                let item = this.tempList[0];
                // 解决多次快速上拉后，可能数据会乱的问题，因为经过上面的两个await节点查询阻塞一定时间，加上后面的定时器干扰
                // 数组可能变成[]，导致此item值可能为undefined
                if (!item) return;
                if (leftRect.height < rightRect.height) {
                    this.leftList.push(item);
                } else if (leftRect.height > rightRect.height) {
                    this.rightList.push(item);
                } else {
                    // 这里是为了保证第一和第二张添加时，左右都能有内容
                    // 因为添加第一张，实际队列的高度可能还是0，这时需要根据队列元素长度判断下一个该放哪边
                    if (this.leftList.length <= this.rightList.length) {
                        this.leftList.push(item);
                    } else {
                        this.rightList.push(item);
                    }
                }
                // 移除临时列表的第一项
                this.tempList.splice(0, 1);
                // 如果临时数组还有数据，继续循环
                if (this.tempList.length) {
                    this.splitData();
                    return
                }
            },
            // 复制而不是引用对象和数组
            cloneData(data) {
                return JSON.parse(JSON.stringify(data));
            },
            tolower(e) {
                this.scrolltolower()
            },
            clear() {
                this.leftList = []
                this.rightList = []
            }
        }
    }
</script>

<style lang="scss" scoped>
    @mixin vue-flex($direction: row) {
        /* #ifndef APP-NVUE */
        display: flex;
        flex-direction: $direction;
        /* #endif */
    }

    .scroll-y {
        height: 78vh;
        margin-top: 18px;
    }

    .u-waterfall {
        @include vue-flex;
        flex-direction: row;
        align-items: flex-start;
    }

    .u-column {
        @include vue-flex;
        flex: 1;
        flex-direction: column;
        height: auto;
        width: 45vw;
        word-break: break-all;
    }
</style>

3、简单使用

基于vue的语法进行使用，先进行导入和注册

<script>
import waterfall from '../../component/waterfall/index.vue'
export default {
    name: 'content',
    components: {
        waterfall
    }
}
</script>

因为组件是基于插槽的形式进行开发的，所以我们可以直接传入咱们的样式和标签

<template>
    <view class="main">
        <waterfall :value="dataList" :scrolltolower="getRecommendLove" ref="child">
            <template v-slot:left="left">
                <view v-for="item in left.leftList" :key="item.id" class="left-content" @click="copy(item)">
                    <view class="item">
                        {{item.content}}
                    </view>
                </view>
            </template>
            <template v-slot:right="right">
                <view v-for="item in right.rightList" :key="item.id" class="right-content" @click="copy(item)">
                    <view class="item">
                        {{item.content}}
                    </view>
                </view>
            </template>
        </waterfall>
    </view>
</template>

最终的效果就可以达到我们的目标了