いわゆる滝の流れ効果は、ライトマップベッドのホームページ効果のようなものです。類似したコンテンツを持つ複数の列が密接に配置されており、列間のギャップを最小限に抑えようとしています（つまり、流体レイアウト）。ページスクロールバーが下にスクロールすると、すべてのデータがロードされるまで新しいデータが現在のページの最後に追加されます（スクロールトリガーAJAXページターン）。
滝の流れはページネーションを引き起こします
ここでこのアイデアについて話させてください。ただし、次の例はすべて使用することはできません。
1.画面に入るときは、コンテンツが空であるかどうかを判断します。空でない場合は、データの初期化を開始します。
2。画面に引き下げたら、データの下部と画面の高さ +スクロールの高さを判断します。底部が上記の2つの合計よりも小さい場合は、インターフェイスを再クエストします。つまり、データをロードします。
3.データが特定のページ数を超えたら、ページの読み込みまたは表示を停止し、クリックしてコンテンツを表示します。
var intf_url = "http://vevb.com/intf"; var pathurl = "http://vevb.com/"; var page = 1; var isloadrb = false; var ul_select = $（ "＃fanslist"）; var btn_more = $（ "＃loading"）; if（ul_select.length <1）return; var is_more = true; // cross-domain request interface function loadjs（src、callback）{var js = document.createelement（ 'script'）; js.src = src; js.oneadystatechange = js.onload = function（）{if（！js.readystate || js.readystate == 'loaded' || js.readystate == 'complete'）{if（callback）{callback（）|| callback}; }}; js.charset = "utf-8"; document.getElementsByTagname（ 'head'）[0] .AppendChild（js）;} // callback関数fill（data）{if（data.pagecount == data.pageno）{is_more = fals $（ "＃loading"）。html（ "loaded"）;}} //インターフェイス関数queryintf（）{var url = page == 1？intf_url+"。json"：intf_url+"_ page"+page+"。json"; loadjs（url、callback） loaded*/function needtoloadrb（）{var btn_top = btn_more.offset（）。top; var window_height = $（window）.height（）; var scroll_top = $（window）.scrolltop（）; btn_top <scroll_top+window_height？true：false;} $（window）.scroll（function（）{var _needload = needtoloadrb（）; if（_ needload && asloadrb == false && is_more）{isloadrb = trueintf = true;} windololodf（） }上記は、ドロップダウンコンテンツを読み続ける比較的単純なアイデアコードです。
JSON形式は（動的インターフェイスの場合、コールバック関数を使用できます。ここにfill（）を追加する必要はありません）：
fill（{"fans"：[{"nickname"： "cai baojian"、 "website"： "vevb.com"、 "youzhi"： "2.5"、 "time"： "3分前"}、{"nickname"： "cai baojian"、 "" vevb "：" youzhi "：" Ago "}、{" nickname "：" cai baojian "、" website "：" vevb.com "、" youzhi "：" 2.5 "、" time "：" 3分前 "}、{" nickname "：" cai baojian "、" we bsite "：" vevb.com "、" "2.5"、 "" "" "" "：" Ago "}、{" nickname "：" cai baojian "、" website "：" vevb.com "、" youzhi "：" 2.5 "、" time "：" 3分前 "}、{" nickname "：" cai baojian "、" website "：" vevb.com "、" nizhi "、" " ckname "：" cai baojian "、" website "：" vevb.com "、" youzhi "：" 2.5 "、" time "：" 3分前 "}、{" nickname "：" cai baojian "、" webサイト "：" vevb.com "、" youzhi "：" 2.5 "：" 3分ague "}]、" pagecount "：2、" pageno "：1、" Pagesize "：10、" Totalize "：20}）;静的インターフェイスコールバックも使用できることがわかります。静的処理を通じて、サーバーの圧力が大幅に緩和され、コンテンツ生成が加速され、大規模なWebサイトに必要な処理方法です。
JQueryのAjaxメソッドは、滝の流れを引き起こすページネーションを実装します
1。ajaxを介して次のページのコンテンツを取得します
次のHTML構造を備えたWebページでナビゲーションが必要です。Next_Linkは次のページのURLです。
<div id = "page_nav"> <a href = "next_link">次ページ</a> </div>
対応するCSS
#page_nav {clear：blote;テキストアライグ：センター; }次のコードは、Ajaxを介して次のページのコンテンツを取得し、現在のコンテンツの最後に追加することです。
nexthref = $（ "＃next_page a"）。次のページリンクが空であるif（nexthref！= undefined）{// ajaxページターン$ .ajax（{url：$（ "＃page_nav a"）。 a "）。attr（" href "）; $（"＃page_nav a "）。2。追加のコンテンツの流体レイアウト
jQueryに精通している子供用の靴は、JSがAjaxを介してページに挿入された要素に対して機能しないことを理解する必要がありますが、Masonryが内部で同様の処理を行い、デフォルトで動作するため、Live（）を使用するなど、これを行う必要はありません。
$ newElems = $ result; $ newElems.ImagesLoaded（function（）{$ container.masonry（ 'applened'、$ newelems、true）;}）;3. AJAXページのターニングプロセスを変更します
上記のプロセスではすでに完全な滝の流れのレイアウトがありますが、ページターニングプロセス中にプロンプトはありません。複数の写真を直接挿入すると、ユーザーエクスペリエンスに影響を与える可能性があるため、ページターニングプロセスにいくつかの変更を加える必要があります。完全なコードを以下に示します。
ここでは、新しいコンテンツがロードされていること、またはプロンプトが最後のページに到達したことをプロンプトするために、次のように要素を追加する必要があります。
<div id = "page_loading"> <span>パワーローディング... </span> </div>
対応するCSS
コードコピーは次のとおりです。
#page_loading {display：none;背景：＃111111;不透明度：0.7;高さ：60px;幅：220px;パディング：10px;位置：絶対;下：-50px;左：330px; }
以下は、完全なAJAXページターンコードです
nexthref = $（ "＃next_page a"）。次のページのリンクは空です（nexthref！= undefined）{//ロードモジュール$（ "＃page_loading"）。show（ "slow"）; .imgbox "）; nexthref = $（data）.find（"＃page_nav a "）。attr（" href "）; $（"＃page_nav a "）。 $ newelems.imagesloaded（function（）{$ container.masonry（ 'appled' '、$ newelems、true）;最後のページ！ "）; $（"＃page_loading "）