瀑布流布局中的圖片有一個核心特點 —— 等寬不定等高，瀑布流布局在國內網網站都有一定規模的使用，比如、花瓣網等等。那么接下來就基于這個特點開始瀑布流探索之旅。基礎功能實現首先，我們定義好一個有 20 張圖片的容器，代碼如下：
js"> <body><style>#waterfall {position: relative;}.waterfall-box {float: left;width: 200px;}style>body><div id="waterfall"><img src="images/1.png"><img src="images/2.png"><img src="images/3.png"><img src="images/4.png"><img src="images/5.png"><img src="images/6.png">...div>由于未知的css知識點js 數據加載完成事件，絲襪最長的妹子把下面的空間都占用掉了。
接著正文，假如如上圖，每排有 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)}}
細心的朋友也許發現了代碼中獲取圖片的高度用到了 這個屬性，這個屬性的高度之和等于圖片高度 + 內邊距 + 邊框，正因為此，我們用了 而不是 來設置圖片與圖片之間的距離。此外除了 屬性，此外還要理解 、、、 等屬性的區別，才能比較好的理解這個項目。css 代碼簡單如下：
.waterfall-box {float: left;width: 200px;padding-left: 10px;padding-bottom: 10px;}至此完成了瀑布流的基本布局，效果圖如下：
、 事件監聽的實現
實現了初始化函數init 以后，下一步就要實現對 滾動事件進行監聽，從而實現當滾到父節點的底部有源源不斷的圖片被加載出來的效果。
這時候要考慮一個點js 數據加載完成事件，是滾動到什么位置時觸發加載函數呢？這個因人而異，我的做法是當滿足 父容器高度 + 滾動距離 > 最后一張圖片的 這個條件，即橙色線條 + 紫色線條 > 藍色線條時觸發加載函數，代碼如下：
window.onscroll = function() {// ...if (scrollPX + bsHeight > imgList[imgList.length - 1].offsetTop) {// 瀏覽器高度 + 滾動距離 > 最后一張圖片的 offsetTopconst 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)},}事件的監聽與 事件監聽大同小異，當觸發了 函數，調用 init 函數進行重置就行。
使用發布-訂閱模式和繼承實現監聽綁定
既然以開發插件為目標，不能僅僅滿足于功能的實現，還要留出相應的操作空間給開發者自行處理。
聯想到業務場景中瀑布流中下拉加載的圖片一般都來自 Ajax 異步獲取，那么加載的數據必然不能寫死在庫里，期望能實現如下調用(此處借鑒了的使用方式)，
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) // 調用事件監聽器}}接著，要讓 能使用發布/訂閱模式，只需讓 繼承 函數，代碼實現如下:
function Waterfall(options = {}) {eventEmitter.call(this)this.init(options) // 這個 this 是 new 的時候，綁上去的}Waterfall.prototype = Object.create(eventEmitter.prototype)Waterfall.prototype.constructor = Waterfall繼承方式的寫法吸收了基于構造函數繼承和基于原型鏈繼承兩種寫法的優點，以及使用 . 隔離了子類和父類，關于繼承更多方面的細節，可以另寫一篇文章了，此處點到為止。
小優化
為了防止 事件觸發多次加載圖片，可以考慮用函數防抖與節流實現。在基于發布-訂閱模式的基礎上，定義了個 參數表示是否在加載中，并根據其布爾值決定是否加載，代碼如下：
let isLoading = falseconst scroll = function () {if (isLoading) return false // 避免一次觸發事件多次if (scrollPX + bsHeight > imgList[imgList.length - 1].offsetTop) { // 瀏覽器高度 + 滾動距離 > 最后一張圖片的 offsetTopisLoading = truethis.emit(‘load‘)}}proto.done = function () {this.on(‘done‘, function () {isLoading = false...})this.emit(‘done‘)}這時候需要在調用的地方加上 .done, 從而告知當前圖片已經加載完畢，代碼如下:
const waterfall = new Waterfall({})waterfall.on("load", function () {// 異步/同步加載圖片waterfall.done()})最終效果演示地址：
學習更多技能
請點擊下方公眾號
