通过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 相关文章推荐
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
Jul 27 Javascript
一个挺有意思的Javascript小问题说明
Sep 26 Javascript
jWiard 基于JQuery的强大的向导控件介绍
Oct 28 Javascript
js jquery数组介绍
Jul 15 Javascript
jQuery动态添加删除select项(实现代码)
Sep 03 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
Jan 28 Javascript
jQuery中parents()方法用法实例
Jan 07 Javascript
Javascript中replace()小结
Sep 30 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
Mar 30 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
May 04 Javascript
Vue瀑布流插件的使用示例
Sep 19 Javascript
详解vue中使用protobuf踩坑记
May 07 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中的时间处理
2006/10/09 PHP
用PHP和ACCESS写聊天室(十)
2006/10/09 PHP
网页上facebook分享功能具体实现
2014/01/26 PHP
PHP中include/require/include_once/require_once使用心得
2016/08/28 PHP
Swoole实现异步投递task任务案例详解
2019/04/02 PHP
NodeJS框架Express的模板视图机制分析
2011/07/19 NodeJs
jQuery操作Select的Option上下移动及移除添加等等
2013/11/18 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
2014/04/25 Javascript
JQuery对表单元素的基本操作使用总结
2014/07/18 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
2014/09/04 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
2015/09/14 Javascript
使用Ajax与服务器(JSON)通信实例
2016/11/04 Javascript
NodeJS仿WebApi路由示例
2017/02/28 NodeJs
微信小程序开发之实现自定义Toast弹框
2017/06/08 Javascript
JS实现点击Radio动态更新table数据
2017/07/18 Javascript
vue中mint-ui的使用方法
2018/04/04 Javascript
在vue中使用v-bind:class的选项卡方法
2018/09/27 Javascript
angular 实现同步验证器跨字段验证的方法
2019/04/11 Javascript
在layui下对元素进行事件绑定的实例
2019/09/06 Javascript
基于jQuery实现挂号平台首页源码
2020/01/06 jQuery
vue keep-alive的简单总结
2021/01/25 Vue.js
[00:44]TI7不朽珍藏III——军团指挥官不朽展示
2017/07/15 DOTA
[57:29]Alliance vs KG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/17 DOTA
Python线程创建和终止实例代码
2018/01/20 Python
python中时间模块的基本使用教程
2019/05/14 Python
OpenCV哈里斯(Harris)角点检测的实现
2020/01/15 Python
Tensorflow 实现将图像与标签数据转化为tfRecord文件
2020/02/17 Python
python selenium操作cookie的实现
2020/03/18 Python
简历中个人自我评价范文
2013/12/26 职场文书
有趣的广告词
2014/03/18 职场文书
单位活动策划方案
2014/08/17 职场文书
教师四风对照检查材料思想汇报
2014/09/17 职场文书
2019年幼儿园管理条例范本!
2019/07/17 职场文书
动画《新网球王子 U-17 WORLD CUP》希腊队PV公开
2022/04/02 日漫
SQL Server的存储过程与触发器以及系统函数和自定义函数
2022/04/10 SQL Server
python画条形图的具体代码
2022/04/20 Python