通过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中json对象和string对象之间相互转化
Dec 26 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
Nov 25 Javascript
编程语言JavaScript简介
Oct 16 Javascript
Javascript Object 对象学习笔记
Dec 17 Javascript
jQuery实现圣诞节礼物动画案例解析
Dec 25 Javascript
JavaScript两个变量交换值的实现方法
Mar 01 Javascript
vue.js学习之vue-cli定制脚手架详解
Jul 02 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
Aug 10 Javascript
vue-cli + sass 的正确打开方式图文详解
Oct 27 Javascript
微信小程序JS加载esmap地图的实例详解
Sep 04 Javascript
原生JavaScript创建不可变对象的方法简单示例
May 07 Javascript
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
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
多文件上载系统完整版
2006/10/09 PHP
PHP中如何判断AJAX提交的数据
2012/02/05 PHP
php实现的SSO单点登录系统接入功能示例分析
2016/10/12 PHP
PHP自定义函数判断是否为Get、Post及Ajax提交的方法
2017/07/27 PHP
PHP array_reverse() 函数原理及实例解析
2020/07/14 PHP
JQuery中Ajax()的data参数类型实例分析
2015/12/15 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
Google 地图类型详解及示例代码
2016/08/06 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
2016/09/24 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
2016/11/18 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
2017/09/28 Javascript
jquery写出PC端轮播图实例
2018/01/26 jQuery
Vue.js实现备忘录功能
2019/06/26 Javascript
微信头像地址失效踩坑记附带解决方案
2019/09/23 Javascript
webpack的 rquire.context用法实现工程自动化的方法
2020/02/07 Javascript
javascript实现移动端上传图片功能
2020/08/18 Javascript
ant design vue中表格指定格式渲染方式
2020/10/28 Javascript
Js数组扁平化实现方法代码总汇
2020/11/11 Javascript
pygame学习笔记(4):声音控制
2015/04/15 Python
python操作MySQL 模拟简单银行转账操作
2017/09/27 Python
Python程序员面试题 你必须提前准备!
2018/01/16 Python
Python 字符串、列表、元组的截取与切片操作示例
2019/09/17 Python
浅谈Python3实现两个矩形的交并比(IoU)
2020/01/18 Python
Python如何执行系统命令
2020/09/23 Python
Python实现网络聊天室的示例代码(支持多人聊天与私聊)
2021/01/27 Python
mui几种页面跳转方式对比总结概括
2017/08/18 HTML / CSS
adidas旗下高尔夫装备供应商:TaylorMade Golf(泰勒梅高尔夫)
2016/08/28 全球购物
三八妇女节活动主持词
2014/03/17 职场文书
2015个人简历自我评价语
2015/03/11 职场文书
2016年寒假学习心得体会
2015/10/09 职场文书
2016形势与政策学习心得体会
2016/01/12 职场文书
初中物理教学反思
2016/02/19 职场文书
经典人生语录分享:不畏将来,不念过去,笑对当下
2019/12/12 职场文书
mysql备份策略的实现(全量备份+增量备份)
2021/07/07 MySQL
六个好看实用的 HTML + CSS 后台登录入口页面
2022/04/28 HTML / CSS
MySQL8.0 Undo Tablespace管理详解
2022/06/16 MySQL