JS代码实现瀑布流插件-
根基功能实现
第一我们定义好一个有 20 张图片的容器，
因为未知的 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 属性，此外还要了解 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()
})
