定宽不定高元素瀑布流显示

<template>
  <div class="secondary_wrap_box_hidden">
  <!--预渲染,用于计算该模块的实际高度-->
    <div class="count-box">
      <div class="one-info"
           v-for="(curr,key,index) in dataObj"
           :key="key">
        <template v-if="index==0">
          <div class="item"
               v-for="(item,index) of dataList"
               :key="index">
            <img :src="item.img"
                 alt="">
            <p v-html="item.title"></p>
          </div>
        </template>
      </div>
    </div>
    <!--展示给用户的模块-->
    <div class="show-box"
         v-infinite-scroll="load"
         infinite-scroll-disabled="disabled">
      <div class="one-info"
           v-for="(curr,key) in dataObj"
           :key="key">
        <div class="item"
             v-for="(item,index) of dataObj[key].list||[]"
             :key="index">
          <img :src="item.img"
               alt="">
          <p v-html="item.title"></p>
        </div>
      </div>
    </div>
  </div>
</template>


<script>

export default {
  data () {
    return {
      imgData: [],// imgData本地模拟数据 [{},{}]形式，可自行模拟
      count: 0, //用于模拟下拉加载更多
      dataList: [], //记录待渲染的列表数据，在count-box中计算实际高度
      dataObj: {
        0: {
          list: [],
          height: 0
        },
        1: {
          list: [],
          height: 0
        },
        2: {
          list: [],
          height: 0
        },
        3: {
          list: [],
          height: 0
        }
      }, //分列保存计算好的列表数据，height为当前高度，list为渲染数据
      disabled: true //控制下拉加载是否执行，使用element-ui
    }
  },
  mounted () {
    // 实际情况为拉取接口获取列表数据
    this.imgData = [{ "img": "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=102321575,511125942&fm=26&gp=0.jpg", "title": "舌尖上的<strong>美食</strong>专题" }, { "img": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1177964470,479031676&fm=26&gp=0.jpg", "title": "<strong>美食</strong>新花样:每天换着花样吃,总有一款是你喜欢的菜" }, { "img": "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3850388535,1167207852&fm=26&gp=0.jpg", "title": "木偶葡式<strong>美食</strong>餐厅" }, { "img": "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1134784869,3896009723&fm=26&gp=0.jpg", "title": "芽庄<strong>美食</strong>-春卷" }, { "img": "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2274317971,1991118550&fm=26&gp=0.jpg", "title": "看着就咽口水家常<strong>美食</strong>,一口下去很美味,家庭聚会少不了!" }, { "img": "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3356844394,2271561381&fm=26&gp=0.jpg", "title": "凯宾斯基元素餐厅,当贵阳遇上墨西哥,拉开一场<strong>美食</strong>与" }, { "img": "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2521473907,3034345160&fm=26&gp=0.jpg", "title": "小吃照片图片大全图片 精致<strong>美食</strong>图片大全图片" }, { "img": "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1623160426,1989983192&fm=26&gp=0.jpg", "title": "小吃照片图片大全图片 精致<strong>美食</strong>图片大全图片" }, { "img": "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3789376532,220740491&fm=26&gp=0.jpg", "title": "佛罗伦萨特色<strong>美食</strong> t骨牛排" }, { "img": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2343148560,2821942974&fm=26&gp=0.jpg", "title": "看到你嘴馋 高清晰<strong>美食</strong>壁纸" }, { "img": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1507547397,333458129&fm=26&gp=0.jpg", "title": "广东<strong>美食</strong>多不胜数,你吃过的有多少?" }, { "img": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3762496946,2461284874&fm=26&gp=0.jpg", "title": "蚌埠特色当地<strong>美食</strong> 蚌埠十大名菜" }, { "img": "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2291605549,2231893190&fm=26&gp=0.jpg", "title": "<strong>美食</strong>图片大全高清图片" }, { "img": "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2068529103,1848299236&fm=26&gp=0.jpg", "title": "<strong>美食</strong> 1158_800" }, { "img": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1411954962,357219716&fm=26&gp=0.jpg", "title": "【特色泰宁】泰宁大金湖,尚书第,厦门,鼓浪屿,客家土楼 卧飞7日游" }, { "img": "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=159501217,3112009683&fm=26&gp=0.jpg", "title": "薄家特色炒鸡面前天下<strong>美食</strong>尽失色" }, { "img": "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2961727119,1785817788&fm=26&gp=0.jpg", "title": "企鹅酒店里的<strong>美食</strong>琳琅满目,汇集中西美食为一体,让您享受一站即可" }, { "img": "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1528360192,3283152269&fm=26&gp=0.jpg", "title": "地方<strong>美食</strong>" }, { "img": "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2176865605,3840169309&fm=26&gp=0.jpg", "title": "<strong>美食</strong>摄影 美食静物 马卡龙系列2" }, { "img": "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=296821258,3516286117&fm=26&gp=0.jpg", "title": "探寻青海<strong>美食</strong>:好吃的可真不是一点半点" }, { "img": "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3220167539,1723052210&fm=26&gp=0.jpg", "title": "干 锅 鸡 <strong>美食</strong> 网 做法 1080_662" }, { "img": "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1324497751,718099150&fm=26&gp=0.jpg", "title": "中餐<strong>美食</strong>背景图" }, { "img": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3150719987,3314894563&fm=26&gp=0.jpg", "title": "史上最高逼格的曼谷<strong>美食</strong>攻略!" }, { "img": "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1944451557,1663972702&fm=26&gp=0.jpg", "title": "舌尖上的中国<strong>美食</strong>_舌尖上的中国小吃菜谱" }, { "img": "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=379895550,2286813034&fm=26&gp=0.jpg", "title": "高清<strong>美食</strong>壁纸 (32)" }, { "img": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=120872693,2602966491&fm=26&gp=0.jpg", "title": "猪儿粑是四川兴文的一种特色<strong>美食</strong>" }, { "img": "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1887882765,3459663936&fm=26&gp=0.jpg", "title": "中华<strong>美食</strong>宣传展板psd分层素材" }, { "img": "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=389722003,3857830846&fm=26&gp=0.jpg", "title": "享誉全球的中国<strong>美食</strong>排行榜" }, { "img": "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3104270868,2009215419&fm=26&gp=0.jpg", "title": "40张诱人的<strong>美食</strong>摄影作品" }, { "img": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=17257692,269916416&fm=26&gp=0.jpg", "title": "【纸上的<strong>美食</strong>】山城重庆,连天气都是麻辣味" }]
    this.dataList = this.imgData
    // 保证DOM初始化完成，操作数据
    this.$nextTick(() => {
      this.waterFall();
    })
  },
  methods: {
    load () {
      if (this.count > 4) {
        return
      }
      this.dataList = this.imgData
      this.$nextTick(() => {
        this.waterFall();
      })
      this.disabled = true
    },
    waterFall () {
      // 保存外部this
      let that = this
      $(".count-box .item").each(function (i) {
        // 内部this指向当前遍历DOM
        // 假设当前最小高度的一列是第一列，min为当前最小高度
        let index = 0
        let min = that.dataObj[0].height
        let arr = Object.keys(that.dataObj)
        // 从第二列开始遍历，获取拥有最小高度的列
        for (let idx = 1; idx < arr.length; idx++) {
          if (min > that.dataObj[idx].height) {
            min = that.dataObj[idx].height
            index = idx
          }
        }
        // 将当前数据放进最小列，更新最小列高度
        that.dataObj[index].height = that.dataObj[index].height + $(this).height()
        that.dataObj[index].list.push(that.dataList[i])
      });
      // 实际情况是根据接口中结束标志位判断是否可以触底加载新数据
      this.disabled = false;
      // 数据处理完毕，清空代处理列表
      this.dataList = []
      // 本地用于模拟下拉测试的
      this.count++
    },
  },
}
</script>


<style lang="scss" scoped>
@import "@/assets/css/_handle.scss";
.show-box,
.count-box {
  width: 900px;
  height: 100%;
  margin: 0 auto;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  justify-content: space-around;
  .one-info {
    flex: 1;
    height: auto;
    box-sizing: border-box;
    padding: 0 5px;
    .item {
      width: 100%;
      transition: 0.25s;
      border: 1px solid;
      margin-bottom: 10px;
      img {
        width: 100%;
        height: auto;
        display: block;
        opacity: 0;
        transition: 0.25s;
      }
      &:hover {
        img {
          transition: 0.25s;
          animation: bounceIn 0.25s ease-in 2 alternate;
        }
      }
      p {
        line-height: 22px;
      }
    }
  }
}
// count-box 不展示给用户
.count-box {
  height: 1px;
  overflow: auto;
  position: absolute;
}
@keyframes bounceIn {
  100% {
    transform: scale(1.07);
  }
}
</style>