vue.js实现瀑布流之vue-waterfall-easy
想必大家应该很多都已经习惯了jquery的DOM操作,jquery的瀑布流实现起来也很容易。
但是,随着时代的发展,随着时代的进步.....
算了算了,扯远了,既然能找到这儿来,肯定是在vue.js上已经有一定的基础了,咱们废话不多说,直接进入主题。
转载请注明出处:http://www.cnblogs.com/meng1314-shuai/p/7407055.html !!!!!
那些复制走了还故意把我的链接给去掉的人真的可耻。
vue-waterfall-easy
easy! easy! easy! 重要的事情说三遍!!!
所以说,咱们今天用到的不是大家熟知的vue-waterfall,而是vue-waterfall-easy;
一、获取vue-waterfall-easy组件
这里有两种方式:
第一种就是直接从git上复制vue-waterfall-easy组件的完整代码,粘贴为自己本地项目的组件(源码链接:vue-waterfall-easy),打开链接,进入src/components/vue-waterfall-easy.vue,直接复制所有代码即可。
第二种是通过npm进行全局安装,直接用命令行在你的项目目录下执行:npm install vue-waterfall-easy --save-dev
执行成功后,在node_modules目录下会出现一个vue-waterfall-easy的目录(其实就是整个demo的实例源码)
二、局部引用vue-waterfall-easy组件
如果是直接复制的组件源码作为本地组件,那就直接与普通组件一样引入就可以了:
import vueWaterfallEasy from '你的路径/组件名.vue'
如果是通过npm安装的组件,那就更简单了:
import vueWaterfallEasy from 'vue-waterfall-easy'
直接这样就可以调用到node_modules目录下打包好的vue-waterfall-easy组件了;
当然,引入组件之后一定不要忘记在当前组件中注册该组件哦:
export default {
components: {
vueWaterfallEasy
}
}
三、定义需要用到的变量及方法
data () {
return {
imgsArr: [], //存放所有已加载图片的数组(即当前页面会加载的所有图片)
fetchImgsArr: [] //存放每次滚动时下一批要加载的图片的数组
}
},
methods: {
initImgsArr (n, m) { //初始化图片数组的方法,把要加载的图片装入
var arr = []
for (var i = n; i < m; i++) {
arr.push({ src: `static/img/${i + 1}.jpg`, link: '', info: '一些图片描述文字' }) //src为加载的图片的地址、link为超链接的链接地址、
//info为自定义的图片展示信息,请根据自己的情况自行填写
}
return arr
},
fetchImgsData () { //获取新的图片数据的方法,用于页面滚动满足条件时调用
this.imgsArr = this.imgsArr.concat(this.fetchImgsArr) //数组拼接,把下一批要加载的图片放入所有图片的数组中
}
},
created () {
this.imgsArr = this.initImgsArr(0, 10) //初始化第一次(即页面加载完毕时)要加载的图片数据
this.fetchImgsArr = this.initImgsArr(10, 20) // 模拟每次请求的下一批新的图片的数据数据
}
四、模版中调用组件
<vue-waterfall-easy :imgsArr="imgsArr" @scrollLoadImg="fetchImgsData"></vue-waterfall-easy>
想必大家都能看懂,这里不再赘述。如果你只是需要一个滚动无限加载的瀑布流图片展示,到这一步就已经能满足需求了。当然,看过我发的源码链接里的源码的小伙伴会发现源码中的App.vue模版中是这样引用的:
<template lang="pug"> //不要忽略这个语言属性哦
#app
h1.title vue-waterfall-easy demo
vue-waterfall-easy(:imgsArr="imgsArr",@scrollLoadImg="fetchImgsData")
template( scope="props")
p.some-info 第{{props.index+1}}张图片
p.some-info {{props.value.info}}
</template>
</template>
有了解过的小伙伴应该能看出来这里应用的是pug(也就是大名鼎鼎的jade,后来因为商标的原因改名为pug)的语法,至于为什么这样写,可以参见vue-waterfall-easy.vue源码的第81~90行以及github上(上面我给的链接就是)文档的参数说明:
a.img-box(
v-for="(v,i) in imgsArrC",
:href="v.link",
:style="{padding:gap/2+'px',width: isMobile ? '' : colWidth+'px'}"
)
.img-inner-box
div.img-wraper(:style="{width:imgWidthC+'px',height:v.height?v.height+'px':''}")
img(:src="v.src")
.img-info
slot(:index="i",:value="v")
注:报pug错误的小伙伴请自行百度下载pug依赖库
参数说明
参数 | 描述 |
---|---|
props.index | 图片在数组中的索引,从0开始 |
props.value | 遍历参数imgsArr的元素值 |
五、运行项目
如果以上步骤没有出现问题的话,那么恭喜你,你已经可以看到自己的瀑布流了。当然,我们可以从文档中看到,我们还可以进行一些其他的配置:
组件参数
props: {
gap: { // 图片间隔
type: Number,
default: 20
},
maxCols: { // 最大的列数
type: Number,
default: 5
},
imgsArr: { // 请求返回的图片数据,格式:[{src:'1.jpg','link':'url1' info:'自定义图片信息'},{src:'2.jpg','link':'url2',info:'自定义图片信息'}...]
type: Array,
required: true
},
imgWidth: { // 指定图片的统一宽度
type: Number,
default: 240
},
timeOut: { // 预加载事件小于500毫秒就不显示加载动画,增加用户体验
type: Number,
default: 500
}
}
按照需求自行配置就可以了。
最终效果图:
OK,到此,我们已经按照文档成功的“构建”了我们自己瀑布流组件了。当然,实际项目中我们的需求很可能不只是这样,我们还要自己做一些完善,这里我就不再多说,相信经过以上的讲解,大家已经对vue-waterfall-easy的套路有所了解,可以自己解决如何满足项目需求的问题了。如果有什么不懂或者不知道如何完善以满足需求,可以在评论中留下你的问题或者需求,我会很乐意帮助你的。
转载请注明出处:http://www.cnblogs.com/meng1314-shuai/p/7407055.html
vue.js实现瀑布流之vue-waterfall-easy的更多相关文章
- 用js实现瀑布流的一种简单方法
现在说瀑布流式布局似乎有点晚了,但是每一项技术都是向着“精”和“简”的方向在不断发展,在发展到极致之前,需要一个相当漫长的过程,因此,从这个角度来说,当瀑布流被应用得越来越多的时候,反而更应该讨论它, ...
- js实现瀑布流的一种简单方法实例分享
现在说瀑布流式布局似乎有点晚了,但是每一项技术都是向着“精”和“简”的方向在不断发展,在发展到极致之前,需要一个相当漫长的过程,因此,从这个角度来说,当瀑布流被应用得越来越多的时候,反而更应该讨论它, ...
- 手把手教你js原生瀑布流效果实现
手把手教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...
- 多栏布局与JS实现瀑布流
css3属性之多栏布局与JS实现瀑布流 背景:之前打算自己总结一下flex布局的知识点,发现自己无从下手,原因在何处:我反思了一下,其实原因很简单,使用的次数少,更多的时间使用了百分比,浮动和定位解决 ...
- 原生JS实现瀑布流
浏览网页的时候经常会遇到瀑布流布局的网站.也许有些读者不了解瀑布流.瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数 ...
- [JS练习] 瀑布流照片墙
记录JS实现瀑布流照片墙效果 首先是前端页面 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- bootstrap+masonry.js写瀑布流
最近在用bootstrap写一个网站,其中有个图文展示的页面要用到瀑布流的效果.因为项目要求,项目要以bootstrap为基准,不准私自添加内联样式.内部样式,所以,自己写瀑布流就不行了,所以,根据要 ...
- js插件---瀑布流Masonry
js插件---瀑布流Masonry 一.总结 一句话总结:还是要去看官网,比amazeui上面介绍的详细很多 1.瀑布流的原理是什么? 给外层套好相对定位,里面的每一个弄好绝对定位,然后计算出每一个的 ...
- Vue.js高效前端开发 • 【Vue组件】
全部章节 >>>> 文章目录 一.Vue组件介绍 1.组件概述 2.组件使用步骤 3.实践练习 一.Vue组件使用 1.组件注册 2.组件注册语法糖 3.使用script或te ...
随机推荐
- JavaWeb 后端 <十二> 之 过滤器 filter 乱码、不缓存、脏话、标记、自动登录、全站压缩过滤器
一.过滤器是什么?有什么? 1.过滤器属于Servlet规范,从2.3版本就开始有了. 2.过滤器就是对访问的内容进行筛选(拦截).利用过滤器对请求和响应进行过滤
- .net控件Radiobuttonlist的简单应用
1.radiobuttonlist 通过RepeatDirection属性控制改控件的显示方向是纵向还是横向. 2.radiobuttonlist有一个重要的时间叫OnSelectedIndexCha ...
- Js中的数据属性和访问器属性
Js中的数据属性和访问器属性 在javaScript中,对象的属性分为两种类型:数据属性和访问器属性. 一.数据属性 1.数据属性:它包含的是一个数据值的位置,在这可以对数据值进行读写. 2.数据属性 ...
- win7下elasticsearch5.0 安装head插件
项目开发用到了ES,5.X版本的,然而网上好多的安装资料都不能用,全是之前的老版本,今天弄了一上午终于完事了,总结一下安装的步骤. 1.安装NodeJs 去官网https://nodejs.org/e ...
- php 极简框架ES发布(代码总和不到 400 行)
ES 框架简介 ES 是一款 极简,灵活, 高性能,扩建性强 的php 框架. 未开源之前在商业公司 经历数年,数个高并发网站 实践使用! 框架结构 整个框架核心四个文件,所有文件加起来放在一起总行数 ...
- Python-WXPY实现微信监控报警
概述: 本文主要分享一下博主在学习wxpy 的过程中开发的一个小程序.博主在最近有一个监控报警的需求需要完成,然后刚好在学习wxpy 这个东西,因此很巧妙的将工作和学习联系在一起. 博文中主要使用到的 ...
- 【css】border-image
1. border-image 一个新css3 样式 给边框增加图片,还可以拉升 或重复图片 round 为重复 sketch 为拉升 border: 15px solid transparent; ...
- div+css命名规范大全
网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率, 我们开发DIV+CSS网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特别是新手不知道什么 ...
- servlet之注册登录(简写)
1.注册页面 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEn ...
- Android学习笔记-App初始启动界面实现
android手机上的很多应用程序启动时都会先显示一个图片,作为该应用程序的开始,该图片转瞬即逝.这个图片一般都会用应用的图标,作为广告来用. 例如: 它的实现方式很简单,我们以一个测试APP为例,介 ...