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 相关文章推荐
超级强大的表单验证
Jun 26 Javascript
Google的跟踪代码 动态加载js代码方法应用
Nov 12 Javascript
jQuery登陆判断简单实现代码
Apr 21 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
Oct 24 Javascript
JavaScript实现Java中Map容器的方法
Oct 09 Javascript
JavaScript轮播图简单制作方法
Feb 20 Javascript
JS中使用 after 伪类清除浮动实例
Mar 01 Javascript
基于Vue制作组织架构树组件
Dec 06 Javascript
JavaScript使用面向对象实现的拖拽功能详解
Jun 12 Javascript
2019最新21个MySQL高频面试题介绍
Feb 06 Javascript
原生js+canvas实现贪吃蛇效果
Aug 02 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 jQuery
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运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
PHP使用in_array函数检查数组中是否存在某个值
2015/03/25 PHP
PHP生成json和xml类型接口数据格式
2015/05/17 PHP
DEDE实现转跳属性文档在模板上调用出转跳地址
2016/11/04 PHP
php格式化时间戳
2016/12/17 PHP
php写入文件不覆盖的实例讲解
2019/09/17 PHP
javascript web页面刷新的方法收集
2009/07/02 Javascript
使用SyntaxHighlighter实现HTML高亮显示代码的方法
2010/02/04 Javascript
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
2013/04/08 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
2013/09/22 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
2013/12/27 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
2014/03/10 Javascript
JavaScript使用focus()设置焦点失败的解决方法
2014/09/03 Javascript
基于jquery和svg实现超炫酷的动画特效
2014/12/09 Javascript
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
2016/01/25 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
2016/04/20 Javascript
使用React实现轮播效果组件示例代码
2016/09/05 Javascript
vue.js动态数据绑定学习笔记
2017/05/19 Javascript
vue 实现click同时传入事件对象和自定义参数
2021/01/29 Vue.js
Python中的exec、eval使用实例
2014/09/23 Python
Python使用shelve模块实现简单数据存储的方法
2015/05/20 Python
使用Python来编写HTTP服务器的超级指南
2016/02/18 Python
python3实现UDP协议的服务器和客户端
2017/06/14 Python
Python3.8对可迭代解包的改进及用法详解
2019/10/15 Python
查看keras的默认backend实现方式
2020/06/19 Python
pycharm 关闭search everywhere的解决操作
2021/01/15 Python
澳大利亚有机化妆品网上商店:The Well Store
2020/02/20 全球购物
餐厅销售主管职责范本
2014/02/19 职场文书
一句话工作感言
2014/03/01 职场文书
经典演讲稿汇总
2014/05/19 职场文书
家庭暴力离婚起诉书
2015/05/18 职场文书
推广普通话的宣传语
2015/07/13 职场文书
党性教育心得体会(共6篇)
2016/01/21 职场文书
Python办公自动化之教你如何用Python将任意文件转为PDF格式
2021/06/28 Python
Win11电源已接通但未充电怎么办?Win11电源已接通未充电的解决方法
2022/04/05 数码科技
关于Redis的主从复制及哨兵问题
2022/06/16 Redis