ウォーターフォールフロープラグインを実装するための JS コード-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

ウォーターフォールフロープラグインを実装するための JS コード

小云云

Feb 07, 2018 am 09:25 AM

javascriptプラグイン

滝の流れのレイアウトの写真には、同じ幅と可変の高さという核となる機能があり、Pinterest や Huaban.com などの国内 Web サイトである程度使用されています。この記事では主にネイティブ JS ウォーターフォールフロープラグインとコード関連の説明を詳しく説明しますので、興味のある方は参考にして勉強していただければ幸いです。

基本関数の実装

まず、20 枚の画像を含むコンテナを定義します

<body>
 <style>
  #waterfall {
   position: relative;
  }
  .waterfall-box {
   float: left;
   width: 200px;
  }
 </style>
</body>
<p id="waterfall">
  <img  class="waterfall-box lazy"  src="/static/imghwm/default1.png"  data-src="images/1.png"    alt="ウォーターフォール フロー プラグインを実装するための JS コード" >
  <img  class="waterfall-box lazy"  src="/static/imghwm/default1.png"  data-src="images/2.png"    alt="ウォーターフォール フロー プラグインを実装するための JS コード" >
  <img  class="waterfall-box lazy"  src="/static/imghwm/default1.png"  data-src="images/3.png"    alt="ウォーターフォール フロー プラグインを実装するための JS コード" >
  <img  class="waterfall-box lazy"  src="/static/imghwm/default1.png"  data-src="images/4.png"    alt="ウォーターフォール フロー プラグインを実装するための JS コード" >
  <img  class="waterfall-box lazy"  src="/static/imghwm/default1.png"  data-src="images/5.png"    alt="ウォーターフォール フロー プラグインを実装するための JS コード" >
  <img  class="waterfall-box lazy"  src="/static/imghwm/default1.png"  data-src="images/6.png"    alt="ウォーターフォール フロー プラグインを実装するための JS コード" >
  ...
 </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関数を継承させるだけで、コードは次のように実装されます: 🎜🎜🎜🎜rrreee🎜 継承メソッドは、コンストラクター継承とプロトタイプチェーン継承に基づく2つの記述メソッドの利点を吸収し、Objectを使用します。 .create で分離サブクラスと親クラスについては、継承の詳細については別の記事を書くことができるので、ここではやめておきます。 🎜🎜🎜小規模な最適化🎜🎜🎜 スクロールイベントによって画像の複数の読み込みがトリガーされるのを防ぐために、関数手ぶれ補正とスロットルの使用を検討できます。パブリッシュ/サブスクライブモデルに基づいて、ロード中かどうかを示す isLoading パラメーターが定義され、そのブール値に基づいてロードするかどうかが決定されます。コードは次のとおりです。 🎜🎜🎜🎜rrreee🎜 この時点で、 waterfall.done を追加して、現在のイメージがロードされたことを通知します。コードは次のとおりです。 🎜🎜🎜🎜rrreee🎜 関連する推奨事項: 🎜🎜🎜🎜ピュアネイティブ JS ウォーターフォールプラグインの使用 Macy.js🎜🎜🎜🎜Jquery ウォーターフォールフロープラグインの使い方の紹介_jquery🎜🎜🎜🎜jQuery ウォーターフォールフロープラグイン Wookmark の使用例_jquery🎜🎜

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

声明

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

H5は何を参照していますか？コンテキストの探索Apr 12, 2025 am 12:03 AM

H5ReferStoHtml5、apivotaltechnologyinwebdevelopment.1）html5introduceSnewelementsandapisforrich、dynamicwebapplications.2）Itupp ortsmultimediawithoutplugins、endancingurexperiencecrossdevices.3）semanticelementsimprovecontentstructurendseo.4）H5'srespo

H5：ツール、フレームワーク、およびベストプラクティスApr 11, 2025 am 12:11 AM

H5開発で習得する必要があるツールとフレームワークには、Vue.JS、React、Webpackが含まれます。 1.Vue.jsは、ユーザーインターフェイスの構築に適しており、コンポーネント開発をサポートします。 2.複雑なアプリケーションに適した仮想DOMを介したページレンダリングを最適化します。 3.Webpackは、モジュールのパッケージングに使用され、リソースの読み込みを最適化します。

HTML5の遺産：現在のH5の理解Apr 10, 2025 am 09:28 AM

html5hassificlytransformdedwebdeveverment byintroducingsingingelements、endincemultimediasupport、およびrequrovingperformance.1）itmadewebsitesmoreaccessibleandseo-frendlywithsemantelementslike、and.2）

H5コード：アクセシビリティとセマンティックHTMLApr 09, 2025 am 12:05 AM

H5は、セマンティック要素とARIA属性を介して、WebページのアクセシビリティとSEO効果を改善します。 1.使用などを使用して、コンテンツ構造を整理し、SEOを改善します。 2。ARIA-LabelなどのARIA属性はアクセシビリティを強化し、支援技術ユーザーはWebページをスムーズに使用できます。

H5はHTML5と同じですか？Apr 08, 2025 am 12:16 AM

「H5」と「HTML5」はほとんどの場合同じですが、特定の特定のシナリオでは異なる意味を持つ可能性があります。 1。「HTML5」は、新しいタグとAPIを含むW3C定義標準です。 2。 "H5"は通常、HTML5の略語ですが、モバイル開発では、HTML5に基づくフレームワークを参照する場合があります。これらの違いを理解することは、プロジェクトでこれらの用語を正確に使用するのに役立ちます。

H5の機能は何ですか？Apr 07, 2025 am 12:10 AM

H5、またはHTML5は、HTMLの5番目のバージョンです。開発者により強力なツールセットを提供し、複雑なWebアプリケーションを簡単に作成できるようにします。 H5のコア関数には、次のものが含まれます。1）Webページにグラフィックとアニメーションを描画できる要素。 2）Webページ構造をSEOの最適化を明確かつ助長させるなどのセマンティックタグなど。 3）Geolocationapiなどの新しいAPIは、ロケーションベースのサービスをサポートします。 4）互換性テストとポリフィルライブラリを通じて、クロスブラウザーの互換性を確保する必要があります。

H5リンクの実行方法Apr 06, 2025 pm 12:39 PM

H5リンクを作成する方法は？リンクターゲットを決定します。H5ページまたはアプリケーションのURLを取得します。 HTMLアンカーの作成：＆lt; a＆gt;を使用しますアンカーを作成し、リンクターゲットURLを指定するタグ。リンクプロパティの設定（オプション）：必要に応じて、ターゲット、タイトル、およびオンクリックプロパティを設定します。 Webページに追加：リンクを表示するWebページにHTMLアンカーコードを追加します。

H5互換性の問題を解決する方法Apr 06, 2025 pm 12:36 PM

H5互換性の問題のソリューションには、次のものが含まれます。Webページが画面サイズに応じてレイアウトを調整できるレスポンシブデザインを使用します。クロスブラウザーテストツールを使用して、リリース前に互換性をテストします。 PolyFillを使用して、古いブラウザの新しいAPIのサポートを提供します。 Web標準に従って、効果的なコードとベストプラクティスを使用します。 CSSプリプロセッサを使用して、CSSコードを簡素化し、可読性を向上させます。画像を最適化し、Webページのサイズを削減し、ロードをスピードアップします。 HTTPSがWebサイトのセキュリティを確保できるようにします。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、