通过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 相关文章推荐
取得一定长度的内容,处理中文
Dec 20 Javascript
写了10年的Javascript也未必全了解的连续赋值运算
Mar 25 Javascript
屏蔽script注入小例子
Nov 12 Javascript
两个数组去重的JS代码
Dec 04 Javascript
用js控制组织结构图可以任意拖拽到指定位置
Jan 17 Javascript
Node.js实现文件上传
Jul 05 Javascript
学习使用Bootstrap栅格系统
May 11 Javascript
详解angularjs获取元素以及angular.element()用法
Jul 25 Javascript
深入理解React高阶组件
Sep 28 Javascript
javascript Function函数理解与实战
Dec 01 Javascript
详解iframe跨域的几种常用方法(小结)
Apr 29 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
Sep 21 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
Pain 全世界最小最简单的PHP模板引擎 (普通版)
2011/10/23 PHP
浅析PHP原理之变量分离/引用(Variables Separation)
2013/08/09 PHP
PHP大文件切割上传并带进度条功能示例
2019/07/01 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
PHP过滤器 filter_has_var() 函数用法实例分析
2020/04/23 PHP
JS 常用校验函数
2009/03/26 Javascript
JavaScript单元测试ABC
2012/04/12 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
2016/06/20 Javascript
Angularjs2不同组件间的通信实例代码
2017/05/06 Javascript
Vue实现导出excel表格功能
2018/03/30 Javascript
vue 解决异步数据更新问题
2019/10/29 Javascript
[02:12]打造更好的电竞完美世界:完美盛典回顾篇
2018/12/19 DOTA
python使用marshal模块序列化实例
2014/09/25 Python
numpy数组拼接简单示例
2017/12/15 Python
python实现Decorator模式实例代码
2018/02/09 Python
Python实现矩阵相乘的三种方法小结
2018/07/26 Python
Python实现按逗号分隔列表的方法
2018/10/23 Python
几行Python代码爬取3000+上市公司的信息
2019/01/24 Python
python从入门到精通 windows安装python图文教程
2019/05/18 Python
numpy和pandas中数组的合并、拉直和重塑实例
2019/06/28 Python
python爬虫-模拟微博登录功能
2019/09/12 Python
DJango的创建和使用详解(默认数据库sqlite3)
2019/11/18 Python
Python中logging日志记录到文件及自动分割的操作代码
2020/08/05 Python
利用python 读写csv文件
2020/09/10 Python
Python实现JS解密并爬取某音漫客网站
2020/10/23 Python
Python从文件中读取数据的方法步骤
2020/11/18 Python
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
2020/07/20 HTML / CSS
旅游管理专业生自荐信范文
2014/01/02 职场文书
音乐教育感言
2014/03/05 职场文书
房屋公证委托书
2014/04/03 职场文书
社会调查研究计划书
2014/05/01 职场文书
竞选大队干部演讲稿
2014/09/11 职场文书
幼儿园感恩节活动方案2014
2014/10/11 职场文书
优秀班组事迹材料
2014/12/24 职场文书
小学生2015教师节演讲稿
2015/03/19 职场文书
“5.12”护士节主持词
2015/07/04 职场文书