ホームページ > 記事 > ウェブフロントエンド > JSを使用したウォーターフォールフロープラグインの実装方法

JSを使用したウォーターフォールフロープラグインの実装方法

亚连オリジナル: 2018-06-07 14:28:281298ブラウズ

この記事では、ネイティブ JS ウォーターフォールプラグインの詳細な分析とコード関連の説明を提供します。興味のある読者は参照してください。

滝の流れのレイアウトの写真には、同じ幅と可変の高さという核となる機能があり、Pinterest や Huaban.com などの国内 Web サイトで一定の規模で使用されています。そして、この特徴に基づいて、滝の流れ探索の旅を開始します。

基本的な関数の実装

まず、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 = &#39;absolute&#39; // 核心语句
  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 属性が使用されていることを発見したかもしれません。この属性の高さの合計は、画像の高さ + パディング + ボーダー に等しいため、マージンの代わりにパディングを使用して画像間の距離を設定します。 offsetHeight 属性に加えて、offsetHeight、clientHeight、offsetTop、および scrollTop についても理解する必要があります。 属性の違いを比較することによってのみ、このプロジェクトをより深く理解することができます。 CSS コードは次のように単純です: 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(&#39;img&#39;)
   img.setAttribute(&#39;src&#39;, `images/${i+1}.png`)
   img.setAttribute(&#39;class&#39;, &#39;waterfall-box&#39;)
   fragment.appendChild(img)
  }
  $waterfall.appendChild(fragment)
 }
}

因为父节点可能自定义节点，所以提供了对监听 scroll 函数的封装，代码如下：

proto.bind = function () {
  const bindScrollElem = document.getElementById(this.opts.scrollElem)
  util.addEventListener(bindScrollElem || window, &#39;scroll&#39;, 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(&#39;load&#39;)
 }
}
proto.done = function () {
 this.on(&#39;done&#39;, function () {
  isLoading = false
  ...
 })
 this.emit(&#39;done&#39;)
}

这时候需要在调用的地方加上 waterfall.done

const waterfall = new Waterfall({})
waterfall.on("load", function () {
 // 异步/同步加载图片
 waterfall.done()
})

スクロール、サイズ変更イベント監視の実装

初期化関数 init を実装した後の次のステップは、スクロールイベントの監視を実装することです。スクロールに到達すると、親ノードの下部に画像の安定したストリームが読み込まれる効果があります。このとき考慮すべき点は、スクロール時にローディング関数がどの位置でトリガーされるかということです。これは人によって異なります。私のアプローチは、親コンテナの高さ + 最後の画像のオフセット上部 の条件が満たされたときに読み込みをトリガーすることです。つまり、オレンジ色の線 + 紫色の線 > 青です。 line 関数のコードは次のとおりです。

rrreee

親ノードがノードをカスタマイズする可能性があるため、スクロール監視関数のカプセル化が提供されます。コードは次のとおりです。 rrreee サイズ変更イベント監視はスクロールイベント監視と似ています。サイズ変更関数がトリガーされたら、init を呼び出して関数をリセットするだけです。

パブリッシュ・サブスクライブ・モデルと継承を使用してリスニング・バインディングを実装します目的はプラグインの開発であるため、機能の実現に満足するだけではなく、開発者が独自に処理できる対応する操作スペースも残しておきます。。ビジネスシナリオでウォーターフォールフローで画像をドロップダウンで読み込むことを考えると、通常、画像は Ajax を通じて非同期で取得されるため、読み込まれたデータはライブラリにハードコーディングされてはなりません。次の呼び出しを実装できることが期待されます。ウォーターフォールの使用から教訓を得ます)、

rrreee

呼び出しメソッドを観察すると、パブリッシュ/サブスクライブモデルを使用して実装することを考えるのは難しくありません。パブリッシュ/サブスクライブモデルについては、以前に Node で導入されました。 .js の非同期非同期レコード。中心となるアイデアは、サブスクリプション関数を通じてキャッシュに関数を追加し、パブリッシュ関数を通じて非同期呼び出しを実装することです。コードの実装は次のとおりです。 rrreee 次に、ウォーターフォールがパブリッシュ/サブスクライブモードを使用できるようにします。ウォーターフォールにeventEmitter Functionを継承させるだけで、コードは次のように実装されます:

rrreee

継承メソッドは、コンストラクター継承とプロトタイプチェーン継承に基づく 2 つの記述方法の利点を吸収し、Object を使用します。分離のための .create サブクラスと親クラスができたので、継承の詳細については別の記事を書くことができるので、ここで終了します。 🎜🎜🎜小規模な最適化🎜🎜🎜 スクロールイベントによって画像の複数の読み込みがトリガーされるのを防ぐために、関数手ぶれ補正とスロットルの使用を検討できます。パブリッシュ/サブスクライブモデルに基づいて、ロード中かどうかを示す isLoading パラメーターが定義され、そのブール値に基づいてロードするかどうかが決定されます。コードは次のとおりです。 🎜rrreee

これで。現在のイメージがロードされたことを通知するために waterfall.done を追加します。コードは次のとおりです: 🎜rrreee🎜 上記は、私が全員のためにコンパイルしたものです。 . 今後も皆様のお役に立てれば幸いです。 🎜🎜関連記事: 🎜🎜🎜Vue コンポーネントと Route のライフサイクル (詳細なチュートリアル) 🎜🎜🎜🎜SpringMVC を使用して vue クロスドメインリクエストを解決する🎜🎜🎜🎜 webpack 4.0.0-beta.0 バージョンの新機能 (詳細なチュートリアル) 🎜 🎜

以上がJSを使用したウォーターフォールフロープラグインの実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JSを操作して動的にタグを追加・削除する方法次の記事：JSを操作して動的にタグを追加・削除する方法

続きを見る