瀑布流

我用了网上的方法
waterfall、、waterslot
可以直接引入js代码 或者npm的方式引入
说一些注意事项：

 <waterfall
    :line-gap="lineGap"
    :item-gap="10"
    :watch="items"
    ref="waterfull">
    <WaterfallSlot
          v-for="(item, index) in recommended"
          :width="item.width"
          :height="item.height"
          :order="index"
          :key="index"
          move-class="item-move">
        <personitem :item="item" 
            :mapIdx="index"></personitem>
      </WaterfallSlot>
    </waterfall>

recommended即为瀑布流出现的数据
需要传入宽度和高度，鉴于有图片的情况下，高度是不一定的，需要事先把图片处理一下。
传入图片下面底部的高度，传入图片，挨个处理。获得高度、宽度等信息，传入瀑布流。

/** 预加载照片，获取照片大小
 * waterfallList: [{
 *  pic // img.src
 * }]
 * waterfallWidth 瀑布流宽度
 * waterfallBottomBarHeight 卡片底部高度
 * return waterfallList: [{
 *  width, // waterfall width
 *  height, // waterfall height
 *  loadType // load & error
 * }]
 */
export const preloadPicSize = (waterfallList, waterfallWidth, waterfallBottomBarHeight) => {
  return new Promise((resolve, reject) => {
    let count = 0
    waterfallList.forEach(obj => {
      const img = new Image()
      if (obj.cover.indexOf('gif') > -1) {
        img.src = obj.cover 
      } else {
        //截取问号之后的数据
        // obj.cover = obj.cover.substr(0, obj.cover.lastIndexOf('?')+1)
        img.src = obj.cover + '?imageMogr2/auto-orient/thumbnail/!360x240r/gravity/Center/crop/360x540'
      }
      img.onload = img.onerror = e => {
        obj.width = img.width
        // (waterfallBottomBarHeight * (img.width / waterfallWidth) 处理实际图片宽度 小于 waterfallWidth 的情况
        obj.height = img.height + (waterfallBottomBarHeight * (img.width / waterfallWidth))
        obj.cover = img.src
        obj.loadType = e.type
        if (obj.width === 0) {
          obj.width = waterfallWidth
          obj.height = waterfallWidth + waterfallBottomBarHeight
        }
        count++
        if (count >= waterfallList.length) {
          resolve(waterfallList)
        }
      }
    })
  })
}

传入dataRe原数据，赋值给recommended

await preloadPicSize(dataRe, this.lineGap, 90);
          this.recommended.push(...dataRe);

自适应屏幕宽度

this.lineGap = parseInt(window.screen.width * 0.45)

这样展现出来的样式中间是没有空隙的，需要让其居中显示

.vue-waterfall
  margin 15px 4% 0
  text-align centet

ok