更新记录

1.0.0（2021-03-16） 下载此版本

first upload

平台兼容性

引入组件

// column表示列数
<bb-water-fall ref="waterFall" :column="2"></bb-water-fall>

在获取到渲染数据后，调用组件的方法，生成索引数组

async packageData() {
    // renderData 渲染数据
    // item.img 图片src
    let imgArr = renderData.map(item => item.img)
    let res = await this.$refs.waterFall.grouping(imgArr)
    // 获取到索引数组后，生成要渲染在页面上的数组
    this.leftRenderData = renderData.filter((item,index)=>res[0].includes(index))
    this.rightRenderData = renderData.filter((item,index)=>res[1].includes(index))
}

页面中渲染

<view class="fall-item" v-for="item in leftRenderData">
    <img :src="item.src">
    <view>{{item.title}}</view>
</view>
<view class="fall-item" v-for="item in rightRenderData">
    <img :src="item.src">
    <view>{{item.title}}</view>
</view>

具体的样式以及显示自己灵活操作，可自行查看组件代码，非常简单