瀑布流，看似一个很简单的列表。都是真正实现起来却很曲折....

原本的我，想通过样式去实现这个简单的功能，于是乎，尝试了各种。

比如flex, grid, 还有column-count...

缺陷：

flex： item间隙出现空白或单排从上到下的排序

grid： 容器跟item都需要固定高度，

column-coun： 数据 从上到下的，无法左右

不知道有没有大神有更好的解决方法。

后面参考了别人的作品，有些是通过定位去控制的每一个item的位置的，太麻烦了。。。

最后选择了左右两列.....封装起来。

前台正常请求，在组件内容，再把数据拆成两份

//业务层面

//模拟数据
const data = [
  {img: '/images/1.jpg', title: '1带你体验猪一样的幸福生活， 寻味佛山顺德两天一夜的，寻味佛山顺德两天一夜的...'},
  {img: '/images/2.jpg', title: '2带你体验猪一样的幸福生活， 寻味佛山顺德两天一夜的，寻味佛山顺德两天一夜的...'},
  {img: '/images/3.jpg', title: '3带你体验猪一样的幸福生活， 寻味佛山顺德两天一夜的，寻味佛山顺德两天一夜的...'},
  // {img: '/images/logo-2.png', title: '4带你体验猪一样的幸福生活， 寻味佛山顺德两天一夜的，寻味佛山顺德两天一夜的...'},
  {img: '/images/3.jpg', title: '5带你体验猪一样的幸福生活， 寻味佛山顺德两天一夜的，寻味佛山顺德两天一夜的...'},
  {img: '/images/2.jpg', title: '6带你体验猪一样的幸福生活， 寻味佛山顺德两天一夜的，寻味佛山顺德两天一夜的...'},
  {img: '/images/2.jpg', title: '7带你体验猪一样的幸福生活， 寻味佛山顺德两天一夜的，寻味佛山顺德两天一夜的...'}
]
const data2 = [
  {img: '/images/1.jpg', title: '11带你体验猪一样的幸福生活， 寻味佛山顺德两天一夜的，寻味佛山顺德两天一夜的...'},
  {img: '/images/2.jpg', title: '12带你体验猪一样的幸福生活， 寻味佛山顺德两天一夜的，寻味佛山顺德两天一夜的...'},
  {img: '/images/3.jpg', title: '13带你体验猪一样的幸福生活， 寻味佛山顺德两天一夜的，寻味佛山顺德两天一夜的...'},
  // {img: '/images/logo-2.png', title: '14带你体验猪一样的幸福生活， 寻味佛山顺德两天一夜的，寻味佛山顺德两天一夜的...'},
  {img: '/images/3.jpg', title: '15带你体验猪一样的幸福生活， 寻味佛山顺德两天一夜的，寻味佛山顺德两天一夜的...'},
  {img: '/images/2.jpg', title: '16带你体验猪一样的幸福生活， 寻味佛山顺德两天一夜的，寻味佛山顺德两天一夜的...'},
  {img: '/images/2.jpg', title: '17带你体验猪一样的幸福生活， 寻味佛山顺德两天一夜的，寻味佛山顺德两天一夜的...'}
]  

onReady() {
    const that = this
    const $waterInst = this.getElementsById('waterfall')
    $waterInst.updatex(data)
    //下面的钩子是每一次拉到最后（bindscrolltolower）触发的
    $waterInst.hooks.on('updateData', function() {
      //判断数据是否还未完成加载完
      if(!that.abc) {
        that.timmer = setTimeout(() => {
          $waterInst.append(data2)
        }, 500, function() {
          clearInterval(that.timmer)
        });
        that.abc = true
      }
      else {
        $waterInst.loaded()     //已加载完所有数据时调用
      }
    })
  }
//组件提供的一些方法
    methods: {
      __ready(){
        // this.$waterInst = null
        this.finish = false   //是否已经没有数据了，从而来判断是否禁止bindscrolltolower
      },
      updatex(data) {
        this.orgin = data
        const _newData = adapter(data, opts.heights)
        this.update(_newData)
      },
      append(data2) {
        const newData = adapter(this.orgin.concat(data2), opts.heights)
        this.setData({
          '$item.body': newData.body,
          '$item.footer': newData.footer,
          '$item.title': ''
        })
        this.finish = false
      },
      loading() {
        this.setData({
          '$item.title': {
            title: '请稍等，正在请求数据...',
            itemClass: 'water-fall-loading'
          }
        })
      },
      loaded() {
        this.setData({
          '$item.title': {
            title: '没有更多内容了',
            itemClass: 'water-fall-loading'
          }
        })
      },
      bindscrolltolower(e) {
        if (!this.finish) {
          this.loading()
          this.hooks.emit('updateData')//生成钩子
          this.finish = true
        }
      }
    }