原生JS实现瀑布流插件


Posted in Javascript onFebruary 06, 2018

瀑布流布局中的图片有一个核心特点—等宽不定等高,瀑布流布局在国内网网站都有一定规模的使用,比如pinterest、花瓣网等等。那么接下来就基于这个特点开始瀑布流探索之旅。

基础功能实现

首先我们定义好一个有 20 张图片的容器,

<body>
 <style>
  #waterfall {
   position: relative;
  }
  .waterfall-box {
   float: left;
   width: 200px;
  }
 </style>
</body>
<div id="waterfall">
  <img src="images/1.png" class="waterfall-box">
  <img src="images/2.png" class="waterfall-box">
  <img src="images/3.png" class="waterfall-box">
  <img src="images/4.png" class="waterfall-box">
  <img src="images/5.png" class="waterfall-box">
  <img src="images/6.png" class="waterfall-box">
  ...
 </div>
由于未知的 css 知识点,丝袜最长的妹子把下面的空间都占用掉了。。。
接着正文,假如如上图,每排有 5 列,那第 6 张图片应该出现前 5 张图片哪张的下面呢?当然是绝对定位到前 5 张图片高度最小的图片下方。
那第 7 张图片呢?这时候把第 6 张图片和在它上面的图片当作是一个整体后,思路和上述是一致的。代码实现如下:
Waterfall.prototype.init = function () {
 ...
 const perNum = this.getPerNum() // 获取每排图片数
 const perList = []       // 存储第一列的各图片的高度
 for (let i = 0; i < perNum; i++) {
  perList.push(imgList[i].offsetHeight)
 }
 let pointer = this.getMinPointer(perList) // 求出当前最小高度的数组下标
 for (let i = perNum; i < imgList.length; i++) {
  imgList[i].style.position = 'absolute' // 核心语句
  imgList[i].style.left = `${imgList[pointer].offsetLeft}px`
  imgList[i].style.top = `${perList[pointer]}px`

  perList[pointer] = perList[pointer] + imgList[i].offsetHeight // 数组最小的值加上相应图片的高度
  pointer = this.getMinPointer(perList)
 }
}

细心的朋友也许发现了代码中获取图片的高度用到了 offsetHeight 这个属性,这个属性的高度之和等于图片高度 + 内边距 + 边框,正因为此,我们用了 padding 而不是 margin 来设置图片与图片之间的距离。此外除了offsetHeight 属性,此外还要理解 offsetHeightclientHeightoffsetTopscrollTop 等属性的区别,才能比较好的理解这个项目。css 代码简单如下:

.waterfall-box {
 float: left;
 width: 200px;
 padding-left: 10px;
 padding-bottom: 10px;
}
scroll、resize 事件监听的实现

实现了初始化函数 init 以后,下一步就要实现对 scroll 滚动事件进行监听,从而实现当滚到父节点的底部有源源不断的图片被加载出来的效果。这时候要考虑一个点,是滚动到什么位置时触发加载函数呢?这个因人而异,我的做法是当满足 父容器高度 + 滚动距离 > 最后一张图片的 offsetTop 这个条件,即橙色线条 + 紫色线条 > 蓝色线条时触发加载函数,代码如下:

window.onscroll = function() {
 // ...
 if (scrollPX + bsHeight > imgList[imgList.length - 1].offsetTop) {// 浏览器高度 + 滚动距离 > 最后一张图片的 offsetTop
  const fragment = document.createDocumentFragment()
  for(let i = 0; i < 20; i++) {
   const img = document.createElement('img')
   img.setAttribute('src', `images/${i+1}.png`)
   img.setAttribute('class', 'waterfall-box')
   fragment.appendChild(img)
  }
  $waterfall.appendChild(fragment)
 }
}

因为父节点可能自定义节点,所以提供了对监听 scroll 函数的封装,代码如下:

proto.bind = function () {
  const bindScrollElem = document.getElementById(this.opts.scrollElem)
  util.addEventListener(bindScrollElem || window, 'scroll', scroll.bind(this))
 }
 const util = {
  addEventListener: function (elem, evName, func) {
   elem.addEventListener(evName, func, false)
  },
 }

resize 事件的监听与 scroll 事件监听大同小异,当触发了 resize 函数,调用 init 函数进行重置就行。

使用发布-订阅模式和继承实现监听绑定

既然以开发插件为目标,不能仅仅满足于功能的实现,还要留出相应的操作空间给开发者自行处理。联想到业务场景中瀑布流中下拉加载的图片一般都来自 Ajax 异步获取,那么加载的数据必然不能写死在库里,期望能实现如下调用(此处借鉴了 waterfall 的使用方式),

const waterfall = new Waterfall({options})
waterfall.on("load", function () {
 // 此处进行 ajax 同步/异步添加图片
})

观察调用方式,不难联想到使用发布/订阅模式来实现它,关于发布/订阅模式,之前在 Node.js 异步异闻录 有介绍它。其核心思想即通过订阅函数将函数添加到缓存中,然后通过发布函数实现异步调用,下面给出其代码实现:

function eventEmitter() {
 this.sub = {}
}
eventEmitter.prototype.on = function (eventName, func) { // 订阅函数
 if (!this.sub[eventName]) {
  this.sub[eventName] = []
 }
 this.sub[eventName].push(func) // 添加事件监听器
}
eventEmitter.prototype.emit = function (eventName) { // 发布函数
 const argsList = Array.prototype.slice.call(arguments, 1)
 for (let i = 0, length = this.sub[eventName].length; i < length; i++) {
  this.sub[eventName][i].apply(this, argsList) // 调用事件监听器
 }
}

接着,要让 Waterfall 能使用发布/订阅模式,只需让 Waterfall 继承 eventEmitter 函数,代码实现如下:

function Waterfall(options = {}) {
 eventEmitter.call(this)
 this.init(options) // 这个 this 是 new 的时候,绑上去的
}
Waterfall.prototype = Object.create(eventEmitter.prototype)
Waterfall.prototype.constructor = Waterfall
继承方式的写法吸收了基于构造函数继承和基于原型链继承两种写法的优点,以及使用 Object.create 隔离了子类和父类,关于继承更多方面的细节,可以另写一篇文章了,此处点到为止。

小优化

为了防止 scroll 事件触发多次加载图片,可以考虑用函数防抖与节流实现。在基于发布-订阅模式的基础上,定义了个 isLoading 参数表示是否在加载中,并根据其布尔值决定是否加载,代码如下:

let isLoading = false
const scroll = function () {
 if (isLoading) return false // 避免一次触发事件多次
 if (scrollPX + bsHeight > imgList[imgList.length - 1].offsetTop) { // 浏览器高度 + 滚动距离 > 最后一张图片的 offsetTop
  isLoading = true
  this.emit('load')
 }
}
proto.done = function () {
 this.on('done', function () {
  isLoading = false
  ...
 })
 this.emit('done')
}
这时候需要在调用的地方加上 waterfall.done, 从而告知当前图片已经加载完毕,代码如下:
const waterfall = new Waterfall({})
waterfall.on("load", function () {
 // 异步/同步加载图片
 waterfall.done()
})
源码地址:https://github.com/MuYunyun/waterfall

项目简陋,不足之处在所难免,欢迎留下你们宝贵的意见。

Javascript 相关文章推荐
键盘控制事件应用教程大全
Nov 24 Javascript
Add a Picture to a Microsoft Word Document
Jun 15 Javascript
深入领悟JavaScript中的面向对象
Nov 18 Javascript
Query中click(),bind(),live(),delegate()的区别
Nov 19 Javascript
Jquery 实现table样式的设定
Jan 28 Javascript
javascript中setInterval的用法
Jul 19 Javascript
JavaScript数据存储 Cookie篇
Jul 02 Javascript
canvas绘制表盘时钟
Jan 23 Javascript
图文详解Javascript中的上下文和作用域
Feb 15 Javascript
浅谈Vue组件及组件的注册方法
Aug 24 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
Sep 13 Javascript
JavaScript获取URL参数的方法分享
Apr 07 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
Feb 06 #Javascript
20行JS代码实现粘贴板复制功能
Feb 06 #Javascript
JS中offset和匀速动画详解
Feb 06 #Javascript
Bootstrap实现的表格合并单元格示例
Feb 06 #Javascript
JavaScript实现获取select下拉框中第一个值的方法
Feb 06 #Javascript
AngularJS实时获取并显示密码的方法
Feb 06 #Javascript
详解使用React进行组件库开发
Feb 06 #Javascript
You might like
使用PHP批量生成随机用户名
2008/07/10 PHP
zend framework文件上传功能实例代码
2013/12/25 PHP
php接口和抽象类使用示例详解
2014/03/02 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(六)
2014/06/23 PHP
PHP删除数组中特定元素的两种方法
2019/02/28 PHP
ThinkPHP3.2.3框架Memcache缓存使用方法实例总结
2019/04/15 PHP
javascript Onunload与Onbeforeunload使用小结
2009/12/31 Javascript
js 获取radio按钮值的实例
2013/08/17 Javascript
js如何获取object类型里的键值
2014/02/18 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
2014/03/27 Javascript
AngularJS入门教程之AngularJS表达式
2016/04/18 Javascript
基于JavaScript实现窗口拖动效果
2017/01/18 Javascript
Angular2开发——组件规划篇
2017/03/28 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
2017/05/02 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
2017/05/25 jQuery
基于jquery实现多级菜单效果
2017/07/25 jQuery
jQuery Easyui Treegrid实现显示checkbox功能
2017/08/08 jQuery
详解Vue.js 作用域、slot用法(单个slot、具名slot)
2019/10/15 Javascript
小程序api实现promise封装过程解析
2019/11/21 Javascript
javascript实现异形滚动轮播
2019/11/28 Javascript
JS实现百度搜索框关键字推荐
2020/02/17 Javascript
vue-model实现简易计算器
2020/08/17 Javascript
python 内置函数filter
2017/06/01 Python
python 列表删除所有指定元素的方法
2018/04/19 Python
django session完成状态保持的方法
2018/11/27 Python
用uWSGI和Nginx部署Flask项目的方法示例
2019/05/05 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
Tensorflow不支持AVX2指令集的解决方法
2020/02/03 Python
CSS3实现超酷的黑猫警长首页
2016/04/26 HTML / CSS
StubHub墨西哥:购买和出售您的门票
2016/09/17 全球购物
美国的Eastbay旗下的运动款子品牌:Final-Score
2018/01/01 全球购物
文科教师毕业的自我评价
2014/01/16 职场文书
面试后的感谢信范文
2014/02/01 职场文书
土地转让协议书
2014/04/15 职场文书
2015年园林绿化工作总结
2015/05/23 职场文书
利用Java设置Word文本框中的文字旋转方向的实现方法
2021/06/28 Java/Android