小程序也可以瀑布流，走起首先代码

103 阅读 0 评论 68 点赞

我是靠谱客的博主背后柜子，最近开发中收集的这篇文章主要介绍小程序也可以瀑布流，走起首先代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

首先

本文采用mpvue框架写小程序。原生爱好者自己翻译一下，原理差不多。基本原理就是，对于两列瀑布流，左右两列分别对应一个数组，每次更新瀑布流的时候实时计算对应数组的高度就可以。

代码

data () {
    return {
        itemsLeft : [],
        itemsRight : []
    }
}
// 计算数组高度
  getArraysHeight (arrays) {
      if (!arrays) return
      return arrays.reduce((total, item) => {
        return total + item.srcHeight / item.srcWidth 
      }, 0)
    },
    
// 计算数组的items放入哪个数组
pushItem (arrays) {
      for (let item of arrays) {
        this.getArraysHeight(this.itemsLeft) <= this.getArraysHeight(this.itemsRight) ? this.itemsLeft.push(item) : this.itemsRight.push(item)
      }
    },
复制代码

转载于:https://juejin.im/post/5bffd8886fb9a049e701d378