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>

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

您可能感兴趣的文章:

• vue.js组件vue-waterfall-easy实现瀑布流效果