微信小程序 - - - - - 瀑布流效果实现

对于一些小程序，关于瀑布流的需求是很正常的，瀑布流看起来确实很舒服，但是具体该如何实现呢？

下文给出的方式是： js + css

1. 瀑布流

1.1 什么叫瀑布流?

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

1.2 瀑布流有什么优点？

• 以图片为主的展示页面
• 图片尺寸不一交错排布
• 空间使用更加充分，节省了空间

1.3 如何实现瀑布流的关键是什么?

根据1.1的解释，可以解析出如下两点:

• 参差不齐: 就是说瀑布流card的高度是不一致的
• 不断加载数据块并附加至当前尾部： 就是说新加载的数据，一直追加到现有数据列表的底部

2. 实现思路

2.1 思路梳理

由1.1、1.2、1.3，相信对于瀑布流已经有了一定的概念，接下来就是如何实现瀑布流。

实现瀑布流的关键点在于:

• 分别存储当前列的渲染数据、高度数据
• 新数据应该往哪一列进行追加

2.2 实现瀑布流

假设场景如下：
这是一个商城类的小程序，只需要两列数据即可。上拉加载数据后，自动排列到两侧对应的列表里。

代码如下：

const app = getApp()
var leftHeight = 0, // 左侧列表累计高度
  rightHeight = 0; // 右侧列表累计高度

var commonHeight = 210; // 瀑布流卡片 除图片外的固有高度
Page({
  data: {
    page: 1,
    leftGoods: [], // 左侧列表渲染数据
    rightGoods: [] // 右侧列表渲染数据
  },
  onLoad() {
    // 初始化
    this.init()
  },

  init() {
    // 初始化两侧累计高度、两侧列表数据
    // 重新通过接口获取数据
    leftHeight = 0
    rightHeight = 0
    this.setData({
      leftGoods: [],
      rightGoods: []
    }, () => {
      this.getGoodsList();
    })
  },


  // 获取商品数据
  getGoodsList() {
    const _this = this;
    const {
      page
    } = this.data
    app.http.request('/goods-list', {
      page
    }).then(res => {
      const {
        ec,
        data
      } = res
      if (ec == 200) {
        // 解构出当前存储的数据
        const {
          leftGoods,
          rightGoods
        } = this.data

        // 对返回值里的数据进行处理
        data.list.map(item => {
          // 解构出每张图片的宽高值
          const {
            height,
            width
          } = item.img

          // 计算图片宽高比
          const aspectRatio = width / height

          // 计算图片真实渲染的高度
          let realHeight = 340 / aspectRatio

          // 优先给左侧列表添加数据
          // 只要左侧累计高度不大于右侧累计高度，就给左侧添加；否则就给右侧添加
          // 列表添加数据，对应累计高度也应调整
          if (leftHeight <= rightHeight) {
            leftGoods.push(item)
            leftHeight = leftHeight + realHeight + commonHeight
          } else {
            rightGoods.push(item)
            rightHeight = rightHeight + realHeight + commonHeight
          }

          // 数据处理完成，进行存储
          _this.setData({
            leftGoods,
            rightGoods,
          })
        })
      } else {
        wx.showToast({
          icon: 'error',
          title: '加载数据失败',
        })
      }
    })
  },

  // 划到底部 加载更多
  lower: app.throttle(function () {
    const {
      page
    } = this.data
    this.setData({
      page: page + 1
    }, () => {
      this.getGoodsList()
    })
  }, 500),

})

现在处理好了要渲染的数据，接下来只需要在页面进行布局渲染即可！