原生JS實(shí)現(xiàn)瀑布流插件

瀑布流布局中的圖片有一個(gè)核心特點(diǎn)—等寬不定等高，瀑布流布局在國內(nèi)網(wǎng)網(wǎng)站都有一定規(guī)模的使用，比如pinterest、花瓣網(wǎng)等等。那么接下來就基于這個(gè)特點(diǎn)開始瀑布流探索之旅。

創(chuàng)新互聯(lián)公司是一家專業(yè)從事成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司。作為專業(yè)網(wǎng)站設(shè)計(jì)公司,創(chuàng)新互聯(lián)公司依托的技術(shù)實(shí)力、以及多年的網(wǎng)站運(yùn)營經(jīng)驗(yàn),為您提供專業(yè)的成都網(wǎng)站建設(shè)、成都營銷網(wǎng)站建設(shè)及網(wǎng)站設(shè)計(jì)開發(fā)服務(wù)！

基礎(chǔ)功能實(shí)現(xiàn)

首先我們定義好一個(gè)有 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 知識點(diǎn)，絲襪最長的妹子把下面的空間都占用掉了。。。
接著正文，假如如上圖，每排有 5 列，那第 6 張圖片應(yīng)該出現(xiàn)前 5 張圖片哪張的下面呢？當(dāng)然是絕對定位到前 5 張圖片高度最小的圖片下方。
那第 7 張圖片呢？這時(shí)候把第 6 張圖片和在它上面的圖片當(dāng)作是一個(gè)整體后，思路和上述是一致的。代碼實(shí)現(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) // 求出當(dāng)前最小高度的數(shù)組下標(biāo)
 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)
 }
}

細(xì)心的朋友也許發(fā)現(xiàn)了代碼中獲取圖片的高度用到了 offsetHeight 這個(gè)屬性，這個(gè)屬性的高度之和等于圖片高度 + 內(nèi)邊距 + 邊框，正因?yàn)榇耍覀冇昧?padding 而不是 margin 來設(shè)置圖片與圖片之間的距離。此外除了offsetHeight 屬性，此外還要理解 offsetHeight、clientHeight、offsetTop、scrollTop 等屬性的區(qū)別，才能比較好的理解這個(gè)項(xiàng)目。css 代碼簡單如下：

.waterfall-box {
 float: left;
 width: 200px;
 padding-left: 10px;
 padding-bottom: 10px;
}

scroll、resize 事件監(jiān)聽的實(shí)現(xiàn)

實(shí)現(xiàn)了初始化函數(shù) init 以后，下一步就要實(shí)現(xiàn)對 scroll 滾動事件進(jìn)行監(jiān)聽，從而實(shí)現(xiàn)當(dāng)滾到父節(jié)點(diǎn)的底部有源源不斷的圖片被加載出來的效果。這時(shí)候要考慮一個(gè)點(diǎn)，是滾動到什么位置時(shí)觸發(fā)加載函數(shù)呢？這個(gè)因人而異，我的做法是當(dāng)滿足 父容器高度 + 滾動距離 > 最后一張圖片的 offsetTop 這個(gè)條件，即橙色線條 + 紫色線條 > 藍(lán)色線條時(shí)觸發(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)
 }
}

因?yàn)楦腹?jié)點(diǎn)可能自定義節(jié)點(diǎn)，所以提供了對監(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)聽大同小異，當(dāng)觸發(fā)了 resize 函數(shù)，調(diào)用 init 函數(shù)進(jìn)行重置就行。

使用發(fā)布-訂閱模式和繼承實(shí)現(xiàn)監(jiān)聽綁定

既然以開發(fā)插件為目標(biāo)，不能僅僅滿足于功能的實(shí)現(xiàn)，還要留出相應(yīng)的操作空間給開發(fā)者自行處理。聯(lián)想到業(yè)務(wù)場景中瀑布流中下拉加載的圖片一般都來自 Ajax 異步獲取，那么加載的數(shù)據(jù)必然不能寫死在庫里，期望能實(shí)現(xiàn)如下調(diào)用(此處借鑒了 waterfall 的使用方式)，

const waterfall = new Waterfall({options})
waterfall.on("load", function () {
 // 此處進(jìn)行 ajax 同步/異步添加圖片
})

觀察調(diào)用方式，不難聯(lián)想到使用發(fā)布/訂閱模式來實(shí)現(xiàn)它，關(guān)于發(fā)布/訂閱模式，之前在 Node.js 異步異聞錄有介紹它。其核心思想即通過訂閱函數(shù)將函數(shù)添加到緩存中，然后通過發(fā)布函數(shù)實(shí)現(xiàn)異步調(diào)用，下面給出其代碼實(shí)現(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ù)，代碼實(shí)現(xiàn)如下:

function Waterfall(options = {}) {
 eventEmitter.call(this)
 this.init(options) // 這個(gè) this 是 new 的時(shí)候，綁上去的
}
Waterfall.prototype = Object.create(eventEmitter.prototype)
Waterfall.prototype.constructor = Waterfall

繼承方式的寫法吸收了基于構(gòu)造函數(shù)繼承和基于原型鏈繼承兩種寫法的優(yōu)點(diǎn)，以及使用 Object.create 隔離了子類和父類，關(guān)于繼承更多方面的細(xì)節(jié)，可以另寫一篇文章了，此處點(diǎn)到為止。

小優(yōu)化

為了防止 scroll 事件觸發(fā)多次加載圖片，可以考慮用函數(shù)防抖與節(jié)流實(shí)現(xiàn)。在基于發(fā)布-訂閱模式的基礎(chǔ)上，定義了個(gè) 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')
}

這時(shí)候需要在調(diào)用的地方加上 waterfall.done, 從而告知當(dāng)前圖片已經(jīng)加載完畢，代碼如下:

const waterfall = new Waterfall({})
waterfall.on("load", function () {
 // 異步/同步加載圖片
 waterfall.done()
})

源碼地址：https://github.com/MuYunyun/waterfall

項(xiàng)目簡陋，不足之處在所難免，歡迎留下你們寶貴的意見。

文章題目：原生JS實(shí)現(xiàn)瀑布流插件
文章出自：http://aaarwkj.com/article12/pjcogc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、網(wǎng)站維護(hù)、品牌網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、標(biāo)簽優(yōu)化、自適應(yīng)網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

原生JS實(shí)現(xiàn)瀑布流插件