Vue瀑布流插件的使用示例

我自己写的一个的vue瀑布流插件，列数自适应，不用设置每个卡片的高度。

测试页面：page.vue

模板页面：waterfollow.vue 和 wfcolumn.vue

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

经测试，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" :style="{height:item+'px'}">{{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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。