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 相关文章推荐
js调用浏览器打印模块实现点击按钮触发自定义函数
Mar 21 Javascript
JavaScript声明变量时为什么要加var关键字
Sep 29 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
Dec 14 Javascript
AngularJs自定义服务之实现签名和加密
Aug 02 Javascript
jquery获取点击控件的绝对位置简单实例
Oct 13 Javascript
微信小程序  自定义创建详细介绍
Oct 27 Javascript
JavaScript获取短信验证码(周期性)
Dec 29 Javascript
Web 开发中Ajax的Session 超时处理方法
Jan 19 Javascript
php输出全部gb2312编码内的汉字方法
Mar 04 Javascript
React简单介绍
May 24 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
Sep 10 Javascript
JS数组索引检测中的数据类型问题详解
Jan 11 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实现MVC开发得最简单的方法――模型
2007/04/10 PHP
CentOS 7.2 下编译安装PHP7.0.10+MySQL5.7.14+Nginx1.10.1的方法详解(mini版本)
2016/09/01 PHP
Yii2.0 Basic代码中路由链接被转义的处理方法
2016/09/21 PHP
laravel-admin select框默认选中的方法
2019/10/03 PHP
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
2012/06/14 Javascript
javascript学习笔记(十四) window对象使用介绍
2012/06/20 Javascript
js switch case default 的用法示例介绍
2013/10/23 Javascript
了不起的node.js读书笔记之node的学习总结
2014/12/22 Javascript
JavaScript异步加载浅析
2014/12/28 Javascript
js格式化时间的方法
2015/12/18 Javascript
angular2+nodejs实现图片上传功能
2017/03/27 NodeJs
Angular实现类似博客评论的递归显示及获取回复评论的数据
2017/11/06 Javascript
对vue 键盘回车事件的实例讲解
2018/08/25 Javascript
vue中slot(插槽)的介绍与使用
2018/11/12 Javascript
JS实现的排列组合算法示例
2019/07/16 Javascript
Vue获取页面元素的相对位置的方法示例
2020/02/05 Javascript
写给新手同学的vuex快速上手指北小结
2020/04/14 Javascript
JS自定义右键菜单实现代码解析
2020/07/16 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
2020/08/17 Javascript
python中关于for循环的碎碎念
2017/06/30 Python
python实现高斯判别分析算法的例子
2019/12/09 Python
Python新手学习函数默认参数设置
2020/06/03 Python
意大利奢侈品购物网站:Giglio
2018/01/05 全球购物
Hotter Shoes美国官网:英国最受欢迎的舒适鞋
2018/08/02 全球购物
New Balance比利时官方网站:购买鞋子和服装
2021/01/15 全球购物
Oracle性能调优原则
2012/05/03 面试题
武汉英思工程科技有限公司&ndash;ORACLE面试测试题目
2012/04/30 面试题
金属材料工程毕业生个人的自我评价
2013/11/28 职场文书
村干部承诺书
2014/03/28 职场文书
植物生产学专业求职信
2014/08/08 职场文书
介绍信范文大全
2015/05/07 职场文书
《童年》读后感(三篇)
2019/08/27 职场文书
MySQL系列之十 MySQL事务隔离实现并发控制
2021/07/02 MySQL
Apache POI的基本使用详解
2021/11/07 Servers
Python代码实现双链表
2022/05/25 Python