原生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 相关文章推荐
javascript 全角转换实现代码
Jul 17 Javascript
eval的两组性能测试数据
Aug 17 Javascript
你必须知道的JavaScript 变量命名规则详解
May 07 Javascript
通过一段代码简单说js中的this的使用
Jul 23 Javascript
javascript比较两个日期相差天数的方法
Jul 24 Javascript
jQuery增加与删除table列的方法
Mar 01 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
Aug 05 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
bootstrap table实现合并单元格效果
Dec 24 Javascript
Vue Echarts实现可视化世界地图代码实例
May 07 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
Sep 05 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
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
漫威DC即将合作联动,而双方早已经秘密开始
2020/04/09 欧美动漫
php.ini中date.timezone设置详解
2016/11/20 PHP
php生成条形码的图片的实例详解
2017/09/13 PHP
Laravel 5使用Laravel Excel实现Excel/CSV文件导入导出的功能详解
2017/10/11 PHP
php新建文件的方法实例
2019/09/26 PHP
在jQuery中 关于json空对象筛选替换
2013/04/15 Javascript
js实现日期级联效果
2014/01/23 Javascript
JS在可编辑的div中的光标位置插入内容的方法
2014/11/20 Javascript
js鼠标点击图片实现随机变换图片的方法
2015/02/16 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
2015/03/11 Javascript
javascript模拟C#格式化字符串
2015/08/26 Javascript
浅谈js中字符和数组一些基本算法题
2016/08/15 Javascript
原生js仿jquery实现对Ajax的封装
2016/10/04 Javascript
简单学习vue指令directive
2016/11/03 Javascript
easyui form validate总是返回false的原因及解决方法
2016/11/07 Javascript
js实现数组和对象的深浅拷贝
2017/09/30 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
2017/11/10 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
[02:38]2018年度DOTA2最佳劣单位选手-完美盛典
2018/12/17 DOTA
python实现从网络下载文件并获得文件大小及类型的方法
2015/04/28 Python
Python的collections模块中的OrderedDict有序字典
2016/07/07 Python
python爬虫入门教程--正则表达式完全指南(五)
2017/05/25 Python
Python实现随机生成有效手机号码及身份证功能示例
2017/06/05 Python
python代码过长的换行方法
2018/07/19 Python
Python socket连接中的粘包、精确传输问题实例分析
2020/03/24 Python
python 下载m3u8视频的示例代码
2020/11/11 Python
行政经理岗位职责
2013/11/09 职场文书
实习生评语
2014/04/26 职场文书
社区反邪教工作方案
2014/06/16 职场文书
培训师岗位职责
2015/02/14 职场文书
暑期实践个人总结
2015/03/06 职场文书
2015年小班保育员工作总结
2015/05/27 职场文书
入党积极分子考察意见
2015/06/02 职场文书
简爱读书笔记
2015/06/26 职场文书
搞笑的婚礼主持词
2015/06/29 职场文书
你知道Java Spring的两种事务吗
2022/03/16 Java/Android