怎么在Vue中使用瀑布流插件

这期内容当中小编将会给大家带来有关怎么在Vue中使用瀑布流插件，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

在Page.vue中，修改itemW的值，设置每列的最小宽度。例如：itemW="200"（意为200px）。list为数组。高度不用设置，:是我为了创造卡片高度加上去的，不加就显示卡片的原来大小。

经测试，created加载数据正常，mounted加载、更新数据正常。

Page.vue

<template>  <div class="container">   <w-f-column itemW="200">    <template slot-scope="{columnNum,columnIndex}">     <water-follow :list="list" :columnNum="columnNum" :columnIndex="columnIndex">      <template slot-scope="{item,index}">       <div class="my-box" :>{{item}}-{{index}}</div>      </template>     </water-follow>    </template>   </w-f-column>  </div> </template> <script> import WFColumn from '../waterFollow/WFColumn' import WaterFollow from '../waterFollow/WaterFollow' export default {  name: 'page',  components: {WaterFollow, WFColumn},  data () {   return {    list: []   }  },  created () {   // 有初始数据   for (let i = 0; i < 50; i++) {    this.list.push(Math.floor(Math.random() * 301 + 200))   }  },  mounted () {   // 模拟网络请求   // window.setTimeout(() => {   //  this.list = []   //  for (let i = 0; i < 50; i++) {   //   this.list.push(Math.floor(Math.random() * 301 + 200))   //  }   // }, 1000)   // -- 分割 --   // 模拟数据不断变化   // window.setInterval(() => {   //  this.list = []   //  for (let i = 0; i < 50; i++) {   //   this.list.push(Math.floor(Math.random() * 301 + 200))   //  }   // }, 1000)  } } </script> <style scoped lang="scss">  .container{   width: 100%;   background: gray;   .my-box{    width: 200px;    background: #000;    margin-bottom: 20px;    color: #fff;   }  } </style>

WFColumn.vue

<template>  <div class="wf-container">   <div class="wf-column" v-for="(item,index) in columnNum" :key="'column-'+index" :name="index">    <slot :columnNum="columnNum" :columnIndex="index"></slot>   </div>  </div> </template> <script> export default {  name: 'WFColumn',  props: ['itemW'],  data () {   return {    columnNum: 0   }  },  created () {   this.columnNum = Math.floor(document.body.clientWidth / this.itemW)   window.onresize = () => {    this.columnNum = Math.floor(document.body.clientWidth / this.itemW)   }  } } </script> <style scoped lang="scss"> .wf-container{  width: 100%;  display: flex;  .wf-column{   flex: 1;  } } </style>

WaterFollow.vue

<template>  <div>   <div v-for="(item,index) in list" :key="'item-'+index" class="item" :id="'card-'+columnIndex+'-'+index" v-if="load?(record[index].index===columnIndex):true">    <slot :item="item" :index="index"></slot>   </div>  </div> </template> <script> export default {  name: 'WaterFollow',  props: ['list', 'columnNum', 'columnIndex'],  data () {   return {    column: 0,    record: [],    load: false,    update: false   }  },  methods: {   calculateColumn () {    let cList = []    for (let i = 0; i < this.columnNum; i++) {     cList.push(0)    }    for (let i = 0; i < this.record.length; i++) {     let index = 0     for (let j = 0; j < cList.length; j++) {      if (cList[index] > cList[j]) {       index = j      }     }     cList[index] += this.record[i].height     this.record[i].index = index    }   },   recordInit () {    for (let i = 0; i < this.list.length; i++) {     this.record.push({index: -1, height: -1})    }   },   initHeightData () {    for (let i = 0; i < this.list.length; i++) {     if (document.getElementById('card-' + this.columnIndex + '-' + i)) {      let h = document.getElementById('card-' + this.columnIndex + '-' + i).offsetHeight      this.record[i].height = h     }    }   }  },  beforeCreate () {},  created () {   this.load = false   this.recordInit()  },  beforeMount () {},  mounted () {   this.initHeightData()   this.calculateColumn()   this.load = true  },  beforeUpdate () {},  updated () {   if (this.update) {    this.initHeightData()    this.calculateColumn()    this.update = false    this.load = true   }  },  beforeDestroy () {},  destroyed () {},  watch: {   columnNum (curr, old) {    this.calculateColumn()   },   list (curr, old) {    console.log('list change')    this.recordInit()    this.load = false    this.update = true   }  } } </script> <style scoped> </style>

上述就是小编为大家分享的怎么在Vue中使用瀑布流插件了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注亿速云行业资讯频道。