小程序左右瀑布流实例

/**
 * 根据list生成左右list
 * @params {array} list 追加的评论列表
 */
renderList(list = []) {
  let left_list = this.data.left_list
  let right_list = this.data.right_list
  list.forEach((item, idx) => {
    if (idx % 2) {
      right_list.push(item)
    } else {
      left_list.push(item)
    }
  })
  this.setData({
    left_list,
    right_list,
  })

  // 延时操作，为了准确拿到渲染后的高度
  setTimeout(() => {
    var item = wx.createSelectorQuery()
    item.select('#left').boundingClientRect()
    item.select('#right').boundingClientRect()
    item.exec(res => {
      let [left_height, right_height] = res.map(i => i.height)
      let [left_list, right_list] = [this.data.left_list, this.data.right_list]
      // 卡牌平均半高
      let cut_height = 300
      // 谁高，去掉谁的尾巴给另一个
      if (left_height - right_height > cut_height) {
        right_list.push(left_list.pop())
      } else if (right_height - left_height > cut_height) {
        left_list.push(right_list.pop())
      }
      this.setData({
        left_list,
        right_list,
      })
    })
  }, 1000)
},