小程序瀑布流

1.带有图片widthFix自适应的盒子,瀑布流布局
ps: 注意点有因页面加载渲染问题,需要在this.setData({},()=>{do something...})后执行,并加上适应宽图片的影响,再加上计时器timer=setTimeout(()=>{do something...})延迟,执行才可以.

  // 瀑布流处理

  _refresh(items) {
 
    let query = wx.createSelectorQuery().in(this);
    this.columnNodes = query.selectAll('.dd');
    // console.log(this.columnNodes)
    return new Promise((resolve, reject) => {
      this._render(items, 0, () => {
        resolve()
        console.log(this.data.discussList)
        this.setData({
          watered: true
        })

      })
    })
  },
  _render(items, i, onComplete) {
    let timer = 0;
    if (items.length > i) {
      this.columnNodes.boundingClientRect().exec(arr => {
        const item = items[i]
        const rects = arr[0]

        const lh = rects[0].height;
        const rh = rects[1].height;

        item.position = lh <= rh ? 'left' : 'right';
        // console.log(lh, rh, item.position, items.length, i)

        this.setData({
          discussList: items,
          // discussList: [...this.data.discussList,{item,aa:1}]
        }, () => {
          timer = setTimeout(() => {
            this._render(items, ++i, onComplete)
          }, 100);

        })
        clearTimeout(timer)
      })
    } else {
      onComplete && onComplete()
    }
  },

--by Affandi ⊙▽⊙