原生JS实现瀑布流插件

站长资源 2024/11/28 佚名

2 0 1

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

基础功能实现

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

<body>
 <style>
  #waterfall {
   position: relative;
  }
  .waterfall-box {
   float: left;
   width: 200px;
  }
 </style>
</body>
<div id="waterfall">
  <img src="/UploadFiles/2021-04-02/1.png">

细心的朋友也许发现了代码中获取图片的高度用到了 offsetHeight 这个属性，这个属性的高度之和等于图片高度 + 内边距 + 边框，正因为此，我们用了 padding 而不是 margin 来设置图片与图片之间的距离。此外除了offsetHeight 属性，此外还要理解 offsetHeight、clientHeight、offsetTop、scrollTop 等属性的区别，才能比较好的理解这个项目。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
项目简陋，不足之处在所难免，欢迎留下你们宝贵的意见。

原生JS,瀑布流

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“原生JS实现瀑布流插件”

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年11月28日

原生JS实现瀑布流插件

javascript回调函数详解

JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】

评论“原生JS实现瀑布流插件”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接