通过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 相关文章推荐
脚本收藏iframe
Jul 21 Javascript
禁止空格提交表单的js代码
Nov 17 Javascript
浅析jquery的作用与优势
Dec 02 Javascript
js分页代码分享
Apr 28 Javascript
用javascript对一个json数组深度赋值示例
Jul 27 Javascript
js实现YouKu的漂亮搜索框效果
Aug 19 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
Jul 07 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
Feb 08 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
Aug 07 Javascript
如何在微信小程序中实现Mixins方案
Jun 20 Javascript
JavaScript实现轮播图效果代码实例
Sep 28 Javascript
layUI的验证码功能及校验实例
Oct 25 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
PHP+JS无限级可伸缩菜单详解(简单易懂)
2007/01/02 PHP
PHP生成plist数据的方法
2015/06/16 PHP
YII Framework框架教程之国际化实现方法
2016/03/14 PHP
Django中通过定时任务触发页面静态化的处理方式
2018/08/29 PHP
PHP PDOStatement::setFetchMode讲解
2019/02/03 PHP
this[] 指的是什么内容 讨论
2007/03/24 Javascript
IE和Firefox在JavaScript应用中的兼容性探讨
2008/04/01 Javascript
js中for in的用法示例解析
2013/12/25 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
2014/02/07 Javascript
通过正则表达式实现表单验证是否为中文
2014/02/18 Javascript
Javascript实现计算个人所得税
2015/05/10 Javascript
php利用curl获取远程图片实现方法
2015/10/26 Javascript
jQuery实现分隔条左右拖动功能
2015/11/21 Javascript
JavaScript中Object.prototype.toString方法的原理
2016/02/24 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
2016/05/30 Javascript
JavaScript的this关键字的理解
2016/06/18 Javascript
JS实现的幻灯片切换显示效果
2016/09/07 Javascript
jQuery自定义元素右键点击事件(实现案例)
2017/04/28 jQuery
详解Vue2.0 事件派发与接收
2017/09/05 Javascript
JavaScript动态加载重复绑定问题
2018/04/01 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
2019/11/09 Javascript
JavaScript中的惰性载入函数及优势
2020/02/18 Javascript
Vue左滑组件slider使用详解
2020/08/21 Javascript
原生JavaScript实现轮播图
2021/01/10 Javascript
[02:32]DOTA2亚洲邀请赛 VG战队巡礼
2015/02/03 DOTA
PyCharm使用教程之搭建Python开发环境
2016/06/07 Python
Python 用Redis简单实现分布式爬虫的方法
2017/11/23 Python
Python编程求解二叉树中和为某一值的路径代码示例
2018/01/04 Python
python 字典的打印实现
2019/09/26 Python
python 通过pip freeze、dowload打离线包及自动安装的过程详解(适用于保密的离线环境
2020/12/14 Python
植物选择:Botanic Choice
2017/02/15 全球购物
白俄罗斯女装和针织品网上商店:Presli.by
2019/10/13 全球购物
《秋游》教学反思
2014/04/24 职场文书
国际商务专业毕业生自我鉴定2014
2014/09/27 职场文书
Python使用Kubernetes API访问集群
2021/05/30 Python
vue中div禁止点击事件的实现
2022/04/02 Vue.js