在上一版结束之后，还是不满意。又折腾了几天，今天终于推上来了。

这一次的瀑布流，是真的瀑布流形式，上一版只是看起来像而已。

通过css的grid与js配合，就可以快速形成瀑布流的形式了。不过呢，有点小问题，就是间距（grid-gap），有点小偏差，但是整体不影响。还有一点要注意的grid层最好不要有padding或box-sizing: border-box等

//css部分
.demo-list{
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 12px 12px;
  grid-auto-flow: row dense;
  justify-items: start;
  align-items: start;
  --vsb: hidden;
}
.demo-list-item{
  width: 100%;
  visibility: var(--vsb);  //这个属性的有一点的重要性，可以在渲染时让item先占位
}

//组件部分
  lifetimes: {
    attached: function() { //节点树完成，可以用setData渲染节点，但无法操作节点
      let properties = this.properties
      this.$$id = properties.dataSource.$$id || 'waterfall'
      let list = {
        data: adpater(properties.dataSource.data),
        footer: {
          title: '数据正在加载，请稍后...',
          itemClass: 'waterfall-load-tips'
        },
        header: {
          title: {
            title: ' ',
            itemClass: 'icon-loading'
          },
          itemClass: 'water-loading-page'
        },
        listClass: 'demo-list',
        itemClass: 'demo-list-item',
      }
      this.setData({
        scrollCfg: properties.dataSource.scrollCfg,
        $list: list
      })
      this.orginData = properties.dataSource.data
      this.loadedStatus = false     //判断是否已经显示了加载完成的状态
    },
    ready: function() {
      let query = wx.createSelectorQuery().in(this)
      const that = this
      this.hooks.once('compute-items-rect', function() {
        setTimeout(() => {
          query.selectAll('.wrap-list >>> .demo-list-item').boundingClientRect(ret=>{
            if (ret.length) {
              let styleStr = '';
              ret.forEach((ele, ii) => {
                let height = ele.height
                let span = parseInt((height + 12) / 12)
                styleStr += `--item-row-span-${ii}: auto / span ${span};`
              })
              styleStr += `--vsb: visible ;`
              that.setData({ '$list.listStyle': styleStr, '$list.header': {title: ' ', itemClass: ' '}})
            }
          }).exec()
        }, 1000)
      })
      this.hooks.emit('compute-items-rect')
    }
  }

//业务部分
//wxml
  
//js
const data = [
  {
    img: 'http://www.agzgz.com/imgs/appstorecover-1.jpg',
    title: '带你体验一样的幸福生活， 寻味两天一夜的...',
  },
  {
    img: 'http://www.agzgz.com/imgs/fruit.jpg',
    title: '3选多功能私享头',
  }
...
]  
    data: {
      list: {
        $$id: 'waterfallx',   //实例id
        scrollCfg: {         //scroll配置
          'scroll-y': true,
          'lower-threshold': 100,
          bindscrolltolower: 'bindscrolltolower',
          'enable-back-to-top': true
        },
        listClass: 'demo-list',
        itemClass: 'demo-list-item',
        data: data
      }
    }

使用方法也是很简单的一件事，引入组件，传入数据。查看效果，或源码展示可扫以下两个小程序码