原生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 相关文章推荐
JS中typeof与instanceof之间的区别总结
Nov 14 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
Jan 17 Javascript
浅析AngularJS中的生命周期和延迟处理
Jun 18 Javascript
javascript中this指向详解
Apr 23 Javascript
javascript设计模式Constructor(构造器)模式
Aug 19 Javascript
PHP获取当前页面完整URL的方法
Dec 02 Javascript
vue-loader教程介绍
Jun 14 Javascript
利用node.js实现反向代理的方法详解
Jul 24 Javascript
搭建一个Koa后端项目脚手架的方法步骤
May 30 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
Jun 18 Javascript
vscode vue 文件模板的配置方法
Jul 23 Javascript
vue el-tree 默认展开第一个节点的实现代码
May 15 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
怎么样可以把 phpinfo()屏蔽掉?
2006/11/24 PHP
通过php修改xml文档内容的方法
2015/01/23 PHP
PHP 设计模式系列之 specification规格模式
2016/01/10 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
js 事件小结 表格区别
2007/08/13 Javascript
一个js封装的不错的选项卡效果代码
2008/02/15 Javascript
JavaScript Undefined,Null类型和NaN值区别
2008/10/22 Javascript
JavaScript常用对象的方法和属性小结
2012/01/24 Javascript
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
2012/02/07 Javascript
jquery制作select列表双向选择示例代码
2014/09/02 Javascript
jQuery表格插件datatables用法总结
2014/09/05 Javascript
jQuery中事件与动画的总结分享
2016/05/24 Javascript
Bootstrap学习笔记之css组件(3)
2016/06/07 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
Vue键盘事件用法总结
2017/04/18 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
2017/09/18 Javascript
关于laydate.js加载laydate.css路径错误问题解决
2017/12/27 Javascript
js replace 全局替换的操作方法
2018/06/12 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
2019/05/22 Javascript
用Python分析3天破10亿的《我不是药神》到底神在哪?
2018/07/12 Python
python3 中文乱码与默认编码格式设定方法
2018/10/31 Python
python使用pdfminer解析pdf文件的方法示例
2018/12/20 Python
将python运行结果保存至本地文件中的示例讲解
2019/07/11 Python
django使用xadmin的全局配置详解
2019/11/15 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
2018/09/19 HTML / CSS
丹尼尔惠灵顿手表天猫官方旗舰店:Daniel Wellington
2017/08/25 全球购物
Gina Bacconi官网:吉娜贝康尼连衣裙和礼服
2018/04/24 全球购物
应届生文秘专业个人自荐信格式
2013/09/21 职场文书
多媒体专业自我鉴定
2014/02/28 职场文书
吃空饷专项整治方案
2014/10/27 职场文书
超市收银员岗位职责
2015/04/07 职场文书
大学生村官工作总结2015
2015/04/09 职场文书
2016春季校长开学典礼致辞
2015/11/26 职场文书
Redis调用Lua脚本及使用场景快速掌握
2022/03/16 Redis
python pandas 解析(读取、写入)CSV 文件的操作方法
2022/12/24 Python