這篇文章給大家詳細分析了一個原生JS實作瀑布流插件以及程式碼相關講解，對此有興趣的讀者們參考學習下吧。
瀑布流佈局中的圖片有一個核心特點—等寬不定等高，瀑布流佈局在國內網網站都有一定規模的使用，例如pinterest、花瓣網等等。那麼接下來就基於這個特點開始瀑布流探索之旅。
基礎功能實作
首先我們定義好一個有20 張圖片的容器，
<body>
<style>
#waterfall {
position: relative;
}
.waterfall-box {
float: left;
width: 200px;
}
</style>
</body>
<p 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">
...
</p>
由于未知的 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)
}
}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)
},
}
const waterfall = new Waterfall({options})
waterfall.on("load", function () {
// 此处进行 ajax 同步/异步添加图片
})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) // 调用事件监听器
}
}function Waterfall(options = {}) {
eventEmitter.call(this)
this.init(options) // 这个 this 是 new 的时候，绑上去的
}
Waterfall.prototype = Object.create(eventEmitter.prototype)
Waterfall.prototype.constructor = WaterfallObject.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()
})webpack 4.0.0-beta.0版本新功能（詳細教學）
以上是使用JS如何實現瀑布流插件的詳細內容。更多資訊請關注PHP中文網其他相關文章！
