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>

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