原生JS完成一个瀑布流插件

瀑布流规划中的图片有一个中心特性 —— 等宽不定等高，瀑布流规划在国内网网站都有肯定范围的应用，比方pinterest、花瓣网等等。那末接下来就基于这个特性最先瀑布流探索之旅。

基础功用完成

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








...


由于未知的 css 知识点，丝袜最长的妹子把下面的空间都占用掉了。。。

接着正文，如果如上图，每排有 5 列，那第 6 张图片应当涌现前 5 张图片哪张的下面呢？当然是相对定位到前 5 张图片高度最小的图片下方。

那第 7 张图片呢？这时刻把第 6 张图片和在它上面的图片看成是一个团体后，思绪和上述是一致的。代码完成以下:

Waterfall.prototype.init = function () {
...
const perNum = this.getPerNum() // 猎取每排图片数
const perList = [] // 存储第一列的各图片的高度
for (let i = 0; i perList.push(imgList[i].offsetHeight)
}
let pointer = this.getMinPointer(perList) // 求出当前最小高度的数组下标
for (let i = perNum; 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 属性，另外还要明白 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 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()
})

项目地点

项目地点

此插件在 React 项目中的应用

项目大略，不足之处在所难免，迎接留下你们珍贵的看法。