通过vue写一个瀑布流插件代码实例


Posted in Javascript onSeptember 07, 2019

这篇文章主要介绍了通过vue写一个瀑布流插件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

效果如图所示:

通过vue写一个瀑布流插件代码实例

采用了预先加载图片,再计算高度的办法。。网络差的情况下,可能有点卡

新建 vue-water-easy.vue 组件文件

<template>
  <div class="vue-water-easy" ref="waterWrap">
    <div v-for="(items,clos) in list" :key="clos" :style="waterStyle" class="colsW">
      <ul>
        <li v-for="(item,index) in items" :key="index" :style="{marginBottom:gap+'px'}">
          <slot :item="item" :index="index" :clos="clos"></slot>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
 
export default {
  props:{
    maxCols:{
      type:Number,
      default:3,
      validator(value){
        return value > 1;
      }
    },
    srcKey:{
      type:String,
      default:"src"
    },
    gap:{
      type:Number,
      default:10,
      validator(value){
        return value > 0;
      }
    },
    imgsArr:{
      type:Array,
      required:true
    }
  },
  computed:{
    waterStyle(){
      if(this.gap <= 0){
        this.gap = 10;
      }
      return {
        margin:`0 ${this.gap/2}px`
      }
    }
  },
  watch:{
    imgsArr(val){
      this.$nextTick(()=>{
        this.list = this.initData();
        this.start(0);
      })
    }
  },
  data(){
    let list = this.initData();
    return {
      list:list
    }
  },
  mounted(){
    this.start(0);
  },
  methods:{
    initData(){
      let list = new Array(this.maxCols);
      for(let i = 0; i < this.maxCols ; i++){
        list[i] = [];
      }
      return list;
    },
    start(i){
      const me = this;
      let imgsArr = me.imgsArr;
      if(i >= imgsArr.length && this.$refs.waterWrap){
        return ;
      }
       me.loadImg(imgsArr[i],i).catch(()=>{
       }).finally(()=>{
         me.start(++i);
       });
      // for(let i = 0; i < imgsArr.length; i++ ){
      //   let item = imgsArr[i];
      //   me.loadImg(item,i);
      // }
    },
    loadImg(item){
      const me = this;
      let srcKey = me.srcKey;
      return new Promise(function(resolve,reject){
        if(item && item[srcKey]){
          let src = item[srcKey];
          let img = new Image();
          img.src = src;
          img.crossOrigin = "anonymous";
          img.onload = function(){
            var index = me.getMinHeight();
            me.list[index].push(item);
            me.$nextTick(()=>{
              resolve(img)
            });
          }
          img.onerror = function(e){
            reject(e);
          }
         }else{
           reject('数据错误');
         }
      })
       
    },
    getMinHeight(){
      let index = 0;
      try{
        if(!this.$refs.waterWrap){
          return index;
        }
        let childs = this.$refs.waterWrap.children || [];
        let minx = childs[0].children[0].offsetHeight;
        for(let i = 1; i < childs.length; i++){
          let element = childs[i];
          let h = element.children[0].offsetHeight;
          if(h < minx){
            minx = h ;
            index = i;
          }
        }
      }catch(e){
        console.warn(e);
        return index;
      }
       
      return index;
    } 
  }
}
</script>
<style lang="scss" scoped>
.vue-water-easy{
  width: 100%;
  display: flex;
  justify-content: space-between;
  div.colsW{
    flex: 1;
    box-sizing: border-box;
    position: relative;
    &:last-child{
      margin-right: 0 !important;
    }
    &:first-child{
      margin-left: 0 !important;
    }
    ul{
      list-style: none;
      width: 100%;
      li{
        width: 100%;
      }
    }
  }  
}
</style>

使用

<vueWaterEasy :imgsArr="imgsArr" srcKey="url">
      <template v-slot="{item}">
        <img :src="item.url" alt="">
      </template>
</vueWaterEasy>

imgsArr:为图片数据的数组,内部包含对象 [ { src:"xxxx" } ]

srckey : 为图片路径的属性,默认为 src

maxCols: 多少列 默认为 3

gap : 每列的间距默认 10px

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

Javascript 相关文章推荐
javascript面向对象编程(一) 实例代码
Jun 25 Javascript
父子窗体间传递JSON格式的数据的代码
Dec 25 Javascript
js限制文本框只能输入数字(正则表达式)
Jul 15 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
May 07 Javascript
js取消单选按钮选中并判断对象是否为空
Nov 14 Javascript
js控制iframe的高度/宽度让其自适应内容
Apr 09 Javascript
禁用页面部分JavaScript不是全部而是部分
Sep 03 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
Nov 26 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
Jun 21 Javascript
JavaScript中三个等号和两个等号你了解多少
Jul 04 Javascript
node.js支持多用户web终端实现及安全方案
Nov 29 Javascript
vue router导航守卫(router.beforeEach())的使用详解
Apr 19 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
Sep 07 #Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
Sep 06 #Javascript
解决layer.open后laydate失效的问题
Sep 06 #Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
Sep 06 #Javascript
layui在form表单页面通过Validform加入简单验证的方法
Sep 06 #Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
Sep 06 #Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
Sep 06 #Javascript
You might like
第三节 定义一个类 [3]
2006/10/09 PHP
PHP脚本的10个技巧(6)
2006/10/09 PHP
支持数组的ADDSLASHES的php函数
2010/02/16 PHP
删除无限分类并同时删除它下面的所有子分类的方法
2010/08/08 PHP
第五章 php数组操作
2011/12/30 PHP
一个简单的PHP验证码实现代码
2014/05/10 PHP
6个超实用的PHP代码片段
2015/08/10 PHP
[原创]PHP实现SQL语句格式化功能的方法
2017/07/28 PHP
HR vs CL BO3 第一场 2.13
2021/03/10 DOTA
javascript 页面只自动刷新一次
2009/07/10 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
2013/01/15 Javascript
RequireJS使用注意细节
2016/05/15 Javascript
jquery实现图片列表鼠标移入微动
2016/12/01 Javascript
基于js实现二级下拉联动
2016/12/17 Javascript
JS基于面向对象实现的选项卡效果示例
2016/12/20 Javascript
canvas的神奇用法
2017/02/03 Javascript
JavaScript实现仿Clock ISO时钟
2018/06/29 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
2019/08/16 Javascript
全面解析js中的原型,原型对象,原型链
2021/01/25 Javascript
python实现监控windows服务并自动启动服务示例
2014/04/17 Python
Python基于smtplib实现异步发送邮件服务
2015/05/28 Python
对Pandas DataFrame缺失值的查找与填充示例讲解
2018/11/06 Python
在python中使用requests 模拟浏览器发送请求数据的方法
2018/12/26 Python
使用Django简单编写一个XSS平台的方法步骤
2019/03/25 Python
基于python的列表list和集合set操作
2019/11/24 Python
浅谈python 调用open()打开文件时路径出错的原因
2020/06/05 Python
pytorch加载自己的图像数据集实例
2020/07/07 Python
python的dict判断key是否存在的方法
2020/12/09 Python
html5 video全屏播放/自动播放的实现示例
2020/08/06 HTML / CSS
美国五金商店:Ace Hardware
2018/03/27 全球购物
Bailey帽子官方商店:Bailey Hats
2018/09/25 全球购物
大一学生假期实习的自我评价
2013/10/12 职场文书
法律专业应届本科毕业生求职信
2013/10/25 职场文书
校园歌手大赛策划书
2014/01/17 职场文书
机电专业毕业生自我鉴定2014
2014/10/04 职场文书
初中英语教学随笔
2015/08/15 职场文书