SAUI-瀑布流改版（grid）

//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
      }
    }