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>//前端全栈学习交流圈：866109386
 </water-follow>//面向1-3年前端人员
 </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>

对前端的技术，架构技术感兴趣的同学关注我的头条号，并在后台私信发送关键字：“前端”即可获取免费的架构师学习资料

知识体系已整理好，欢迎免费领取。还有面试视频分享可以免费获取。关注我，可以获得没有的架构经验哦！！