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 相关文章推荐
jquery 选项卡效果 新手代码
Jul 08 Javascript
jquery实现顶部向右伸缩的导航区域代码
Sep 02 Javascript
jQuery实现带动画效果的多级下拉菜单代码
Sep 08 Javascript
jquery中实现时间戳与日期相互转换
Apr 12 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
Mar 08 Javascript
JavaScript实现实时更新系统时间的实例代码
Apr 04 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
Jul 31 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 Javascript
全面了解JavaScript的作用域链
Apr 03 Javascript
使用apifm-wxapi快速开发小程序过程详解
Aug 05 Javascript
JS正则表达式验证端口范围(0-65535)
Jan 06 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
Sep 21 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
77A一级收信机修理记
2021/03/02 无线电
PHP学习之PHP变量
2006/10/09 PHP
jq的get传参数在utf-8中乱码问题的解决php版
2008/07/23 PHP
JSON 编辑器实现代码
2009/12/06 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
2013/10/12 Javascript
js获取客户端网卡的IP地址、MAC地址
2014/03/26 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
2014/10/22 Javascript
JavaScript日期时间与时间戳的转换函数分享
2015/01/31 Javascript
js实现纯前端的图片预览
2016/04/27 Javascript
浅析javaScript中的浅拷贝和深拷贝
2017/02/15 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
2017/05/05 Javascript
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
2019/04/12 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
原生javascript制作的拼图游戏实现方法详解
2020/02/23 Javascript
在VUE style中使用data中的变量的方法
2020/06/19 Javascript
vue 实现动态路由的方法
2020/07/06 Javascript
vue组件中传值EventBus的使用及注意事项说明
2020/11/16 Javascript
vue导入.md文件的步骤(markdown转HTML)
2020/12/31 Vue.js
关于better-scroll插件的无法滑动bug(2021通过插件解决)
2021/03/01 Javascript
[02:43]DOTA2英雄基础教程 半人马战行者
2014/01/13 DOTA
python二叉树遍历的实现方法
2013/11/21 Python
python验证码识别教程之滑动验证码
2018/06/04 Python
python读取txt文件中特定位置字符的方法
2018/12/24 Python
python 在某.py文件中调用其他.py内的函数的方法
2019/06/25 Python
Python基于callable函数检测对象是否可被调用
2020/10/16 Python
python unichr函数知识点总结
2020/12/16 Python
广告学专业推荐信范文
2013/11/23 职场文书
营业员实习自我鉴定
2013/12/07 职场文书
管理学院毕业生自荐信范文
2014/03/10 职场文书
专业技术职务聘任书
2014/03/29 职场文书
博士生求职信
2014/07/06 职场文书
感恩教育观后感
2015/06/17 职场文书
Java反应式框架Reactor中的Mono和Flux
2021/07/25 Java/Android
基于PyQT5制作一个桌面摸鱼工具
2022/02/15 Python
windows安装 redis 6.2.6最新步骤详解
2022/04/26 Redis