Vue瀑布流插件的使用示例


Posted in Javascript onSeptember 19, 2018

我自己写的一个的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>

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

Javascript 相关文章推荐
xss文件页面内容读取(解决)
Nov 28 Javascript
javascript与webservice的通信实现代码
Dec 25 Javascript
JavaScript打开word文档的实现代码(c#)
Apr 16 Javascript
JS this作用域以及GET传输值过长的问题解决方法
Aug 06 Javascript
jQuery的css()方法用法实例
Dec 24 Javascript
点击页面任何位置隐藏div的实现方法
Sep 05 Javascript
Vue header组件开发详解
Jan 26 Javascript
简单的vuex 的使用案例笔记
Apr 13 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
Jun 17 Javascript
详解Vue3.0 前的 TypeScript 最佳入门实践
Jun 18 Javascript
vue使用websocket的方法实例分析
Jun 22 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
Aug 09 Javascript
vue-cli项目修改文件热重载失效的解决方法
Sep 19 #Javascript
解决vuecli3.0热更新失效的问题
Sep 19 #Javascript
记一次webapck4 配置文件无效的解决历程
Sep 19 #Javascript
解决vue热替换失效的根本原因
Sep 19 #Javascript
三种Webpack打包方式(小结)
Sep 19 #Javascript
Vue.js更改调试地址端口号的实例
Sep 19 #Javascript
vue添加axios,并且指定baseurl的方法
Sep 19 #Javascript
You might like
世界收音机发展史
2021/03/01 无线电
用PHP读注册表
2006/10/09 PHP
使用PHP curl模拟浏览器抓取网站信息
2013/10/28 PHP
php缓冲输出实例分析
2015/01/05 PHP
Zend Framework常用校验器详解
2016/12/09 PHP
php判断IP地址是否在多个IP段内
2020/08/18 PHP
Javascript 不能释放内存.
2006/09/07 Javascript
摘自启点的main.js
2008/04/20 Javascript
JavaScript 函数replace深入了解
2013/03/14 Javascript
JS日期和时间选择控件升级版(自写)
2013/08/02 Javascript
JS文本获得焦点清除文本文字的示例代码
2014/01/13 Javascript
javascript跨域请求包装函数与用法示例
2016/11/03 Javascript
javascript数组去重方法分析
2016/12/15 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
2017/08/14 Javascript
原生JS进行前后端同构
2018/04/22 Javascript
angular 表单验证器验证的同时限制输入的实现
2019/04/11 Javascript
微信小程序用户拒绝授权的处理方法详解
2019/09/20 Javascript
高性能js数组去重(12种方法,史上最全)
2019/12/21 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
2020/07/26 Javascript
python实现人人网登录示例分享
2014/01/19 Python
决策树的python实现方法
2014/11/18 Python
Python二叉树定义与遍历方法实例分析
2018/05/25 Python
Python Sphinx使用实例及问题解决
2020/01/17 Python
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
Aveda美国官网:天然护发产品、洗发水、护发素和沙龙
2016/12/09 全球购物
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
下列程序在32位linux或unix中的结果是什么
2014/03/25 面试题
最新党员的自我评价分享
2013/11/04 职场文书
劳资专员岗位职责
2013/12/27 职场文书
高中英语演讲稿范文
2014/04/24 职场文书
开展批评与自我批评发言材料
2014/05/15 职场文书
医疗器械售后服务承诺书
2014/05/21 职场文书
感恩节寄语2015
2015/03/24 职场文书
酒店圣诞节活动总结
2015/05/06 职场文书
k8s部署redis cluster集群的实现
2021/06/24 Redis
CPU不支持Windows11系统怎么办
2021/11/21 数码科技