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 相关文章推荐
Prototype使用指南之array.js
Jan 10 Javascript
更正确的asp冒泡排序
May 24 Javascript
基于jQuery的动态表格插件
Mar 28 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
May 19 Javascript
jQuery截取指定长度字符串的实现原理及代码
Jul 01 Javascript
Jquery全选与反选点击执行一次的解决方案
Aug 14 Javascript
javascript中for/in循环及使用技巧
Sep 01 Javascript
浅谈js中StringBuffer类的实现方法及使用
Sep 02 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
Dec 02 Javascript
详解JS对象封装的常用方式
Dec 30 Javascript
JavaScript动态加载重复绑定问题
Apr 01 Javascript
vue的webcamjs集成方式
Nov 16 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
利用PHP创建动态图像
2006/10/09 PHP
sphinx增量索引的一个问题
2011/06/14 PHP
PHP借助phpmailer发送邮件
2015/05/11 PHP
laravel 实现上传图片到本地和前台访问示例
2019/10/21 PHP
实用javaScript技术-屏蔽类
2006/08/15 Javascript
用ASP将SQL搜索出来的内容导出为TXT的代码
2007/07/27 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
2013/01/04 Javascript
用jquery统计子菜单的条数示例代码
2013/10/18 Javascript
JS创建自定义表格具体实现
2014/02/11 Javascript
SeaJS入门教程系列之完整示例(三)
2014/03/03 Javascript
jQuery实现点击水纹波动动画
2016/04/10 Javascript
用jmSlip编写移动端顶部日历选择控件
2016/10/24 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
2018/01/13 Javascript
详解javascript中的变量提升和函数提升
2018/05/24 Javascript
详解搭建es6+devServer简单开发环境
2018/09/25 Javascript
vue数据初始化initState的实例详解
2019/04/11 Javascript
基于VUE的v-charts的曲线显示功能
2019/10/01 Javascript
Jquery让form表单异步提交代码实现
2019/11/14 jQuery
使用Element的InfiniteScroll 无限滚动组件报错的解决
2020/07/27 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
2020/11/07 Javascript
Python的ORM框架SQLAlchemy入门教程
2014/04/28 Python
Python制作CSDN免积分下载器
2015/03/10 Python
Python 实现一行输入多个值的方法
2018/04/21 Python
Python脚本按照当前日期创建多级目录
2019/03/01 Python
Python3获取拉勾网招聘信息的方法实例
2019/04/03 Python
python操作kafka实践的示例代码
2019/06/19 Python
TensorFlow内存管理bfc算法实例
2020/02/03 Python
Python写出新冠状病毒确诊人数地图的方法
2020/02/12 Python
没编程基础可以学python吗
2020/06/17 Python
关于HTML5+ API plusready的兼容问题
2020/11/20 HTML / CSS
SKECHERS斯凯奇中国官网:来自美国的运动休闲品牌
2018/11/14 全球购物
爱之链教学反思
2014/04/30 职场文书
环境整治工作方案
2014/05/18 职场文书
python基于tkinter实现gif录屏功能
2021/05/19 Python
Sleuth+logback 设置traceid 及自定义信息方式
2021/07/26 Java/Android