原生JS實現(xiàn)瀑布流插件
瀑布流布局中的圖片有一個核心特點—等寬不定等高，瀑布流布局在國內(nèi)網(wǎng)網(wǎng)站都有一定規(guī)模的使用，比如pinterest、花瓣網(wǎng)等等。那么接下來就基于這個特點開始瀑布流探索之旅。
基礎(chǔ)功能實現(xiàn)
首先我們定義好一個有 20 張圖片的容器，
<body>
<style>
#waterfall {
position: relative;
}
.waterfall-box {
float: left;
width: 200px;
}
</style>
</body>
<div 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">
...
</div>
由于未知的 css 知識點，絲襪最長的妹子把下面的空間都占用掉了。。。
接著正文，假如如上圖，每排有 5 列，那第 6 張圖片應(yīng)該出現(xiàn)前 5 張圖片哪張的下面呢？當然是絕對定位到前 5 張圖片高度最小的圖片下方。
那第 7 張圖片呢？這時候把第 6 張圖片和在它上面的圖片當作是一個整體后，思路和上述是一致的。代碼實現(xiàn)如下:
Waterfall.prototype.init = function () {
...
const perNum = this.getPerNum() // 獲取每排圖片數(shù)
const perList = [] // 存儲第一列的各圖片的高度
for (let i = 0; i < perNum; i++) {
perList.push(imgList[i].offsetHeight)
}
let pointer = this.getMinPointer(perList) // 求出當前最小高度的數(shù)組下標
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 // 數(shù)組最小的值加上相應(yīng)圖片的高度
pointer = this.getMinPointer(perList)
}
}
細心的朋友也許發(fā)現(xiàn)了代碼中獲取圖片的高度用到了 offsetHeight 這個屬性，這個屬性的高度之和等于圖片高度 + 內(nèi)邊距 + 邊框，正因為此，我們用了 padding 而不是 margin 來設(shè)置圖片與圖片之間的距離。此外除了offsetHeight 屬性，此外還要理解 offsetHeight、clientHeight、offsetTop、scrollTop 等屬性的區(qū)別，才能比較好的理解這個項目。css 代碼簡單如下：
.waterfall-box {
float: left;
width: 200px;
padding-left: 10px;
padding-bottom: 10px;
}
實現(xiàn)了初始化函數(shù) init 以后，下一步就要實現(xiàn)對 scroll 滾動事件進行監(jiān)聽，從而實現(xiàn)當滾到父節(jié)點的底部有源源不斷的圖片被加載出來的效果。這時候要考慮一個點，是滾動到什么位置時觸發(fā)加載函數(shù)呢？這個因人而異，我的做法是當滿足 父容器高度 + 滾動距離 > 最后一張圖片的 offsetTop 這個條件，即橙色線條 + 紫色線條 > 藍色線條時觸發(fā)加載函數(shù)，代碼如下：
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)
}
}
因為父節(jié)點可能自定義節(jié)點，所以提供了對監(jiān)聽 scroll 函數(shù)的封裝，代碼如下：
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 事件的監(jiān)聽與 scroll 事件監(jiān)聽大同小異，當觸發(fā)了 resize 函數(shù)，調(diào)用 init 函數(shù)進行重置就行。
使用發(fā)布-訂閱模式和繼承實現(xiàn)監(jiān)聽綁定
既然以開發(fā)插件為目標，不能僅僅滿足于功能的實現(xiàn)，還要留出相應(yīng)的操作空間給開發(fā)者自行處理。聯(lián)想到業(yè)務(wù)場景中瀑布流中下拉加載的圖片一般都來自 Ajax 異步獲取，那么加載的數(shù)據(jù)必然不能寫死在庫里，期望能實現(xiàn)如下調(diào)用(此處借鑒了 waterfall 的使用方式)，
const waterfall = new Waterfall({options})
waterfall.on("load", function () {
// 此處進行 ajax 同步/異步添加圖片
})
觀察調(diào)用方式，不難聯(lián)想到使用發(fā)布/訂閱模式來實現(xiàn)它，關(guān)于發(fā)布/訂閱模式，之前在 Node.js 異步異聞錄 有介紹它。其核心思想即通過訂閱函數(shù)將函數(shù)添加到緩存中，然后通過發(fā)布函數(shù)實現(xiàn)異步調(diào)用，下面給出其代碼實現(xiàn):
function eventEmitter() {
this.sub = {}
}
eventEmitter.prototype.on = function (eventName, func) { // 訂閱函數(shù)
if (!this.sub[eventName]) {
this.sub[eventName] = []
}
this.sub[eventName].push(func) // 添加事件監(jiān)聽器
}
eventEmitter.prototype.emit = function (eventName) { // 發(fā)布函數(shù)
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) // 調(diào)用事件監(jiān)聽器
}
}
接著，要讓 Waterfall 能使用發(fā)布/訂閱模式，只需讓 Waterfall 繼承 eventEmitter 函數(shù)，代碼實現(xiàn)如下:
function Waterfall(options = {}) {
eventEmitter.call(this)
this.init(options) // 這個 this 是 new 的時候，綁上去的
}
Waterfall.prototype = Object.create(eventEmitter.prototype)
Waterfall.prototype.constructor = Waterfall
Object.create 隔離了子類和父類，關(guān)于繼承更多方面的細節(jié)，可以另寫一篇文章了，此處點到為止。小優(yōu)化
為了防止 scroll 事件觸發(fā)多次加載圖片，可以考慮用函數(shù)防抖與節(jié)流實現(xiàn)。在基于發(fā)布-訂閱模式的基礎(chǔ)上，定義了個 isLoading 參數(shù)表示是否在加載中，并根據(jù)其布爾值決定是否加載，代碼如下：
let isLoading = false
const scroll = function () {
if (isLoading) return false // 避免一次觸發(fā)事件多次
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, 從而告知當前圖片已經(jīng)加載完畢，代碼如下:
const waterfall = new Waterfall({})
waterfall.on("load", function () {
// 異步/同步加載圖片
waterfall.done()
})
項目簡陋，不足之處在所難免，歡迎留下你們寶貴的意見。
相關(guān)文章
webpack4 從零學(xué)習(xí)常用配置(小結(jié))
這篇文章主要介紹了webpack4 從零學(xué)習(xí)常用配置(小結(jié))，詳細的介紹了幾個核心部分，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要介紹了JavaScript數(shù)組各種常見用法實例分析,包括數(shù)組的添加、刪除、替換、還原等常見技巧,非常具有實用價值,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了JS正則表達式驗證密碼格式的集中情況總結(jié),需要的朋友可以參考下2017-02-02
下面小編就為大家?guī)硪黄獎討B(tài)的9*9乘法表效果的實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧2016-05-05
這篇文章主要為大家介紹了JS一級數(shù)組和數(shù)組對象合并去重方法實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-12-12
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)簡單聊天室，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
一文詳解如何將Javascript打包成exe可執(zhí)行文件
這篇文章主要介紹了將Javascript打包成exe可執(zhí)行文件的相關(guān)資料,這種方法適用于需要將JavaScript項目打包成單個獨立運行的可執(zhí)行文件的開發(fā)者,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-04-04
[綠色]非常不錯的一個javascript 類...2006-11-11
這篇文章主要為大家詳細介紹了js實現(xiàn)超級瑪麗小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
D3是一個被數(shù)據(jù)驅(qū)動的文檔。這篇文章主要介紹了基于 D3.js 繪制動態(tài)進度條的方法,需要的朋友可以參考下2018-02-02