いわゆるウォーターフォール フロー効果は、ライト イメージ ベッドのホームページの効果に似ており、同様のコンテンツを含む複数の列が密接に配置され、列間のギャップ (つまり、流動的なレイアウト) を最小限に抑え、ページがスクロールします。バーが下にスクロールすると、すべてのデータが読み込まれるまで、新しいデータが現在のページの末尾に追加されます (スクロール トリガーによる Ajax ページめくり)。
ウォーターフォール フローはページングをトリガーします
以下の例ですべてが使用できるわけではありませんが、いくつかのアイデアがあります:
1. 画面に入ったら、コンテンツが空かどうかを確認します。空でない場合は、データの初期化を開始します。
2. 画面までスクロールする場合、データの下部のサイズと画面の高さ + スクロールの高さを決定します。下限が上記 2 つの合計よりも小さい場合は、インターフェースを再要求、つまりデータをロードします。
3. データが一定のページ数を超えた場合、読み込みを停止するか、ページング形式で表示し、クリックしてコンテンツを再表示します。
var intf_url="http://php.cn/intf";
var pathUrl = "http://php.cn/";
var page=1;
var isLoadRB=false;
var ul_select=$("#fansList");
var btn_more=$("#loading");
if(ul_select.length <1) return ;
var is_more =true;
//跨域请求接口
function loadjs(src,callback){
var js= document.createElement('script');
js.src = src;
js.onreadystatechange = 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);
}
//回调函数
function fill(data){
if(data.pageCount==data.pageNo){
is_more=false;//如果数据全部加载完毕，取消加载
$("#loading").html("加载完毕");
}
}
//解析接口
function queryIntf(){
var url=page==1?intf_url+".json":intf_url+"_page"+page+".json";
loadJs(url,callback);
}
function callback(){
page++;
}
/*判断是否要加载接口*/
function needtoloadRB(){
var btn_top=btn_more.offset().top;
var window_height=$(window).height();
var scroll_Top=$(window).scrollTop();
return btn_top<scroll_Top+window_height?true:false;
}
$(window).scroll(function(){
var _needload=needtoloadRB();
if(_needload && isLoadRB==false &&is_more){isLoadRB=true;queryintf();}
})
window.onload = function(){
queryintf();
}上記は、ドロップダウン コンテンツを継続的に読み込む比較的単純なコードです。
JSON 形式も同様です (動的インターフェースの場合はコールバック関数を使用できるため、ここに fill() を追加する必要はありません):
fill({"fans":[{"nickname":"蔡宝坚","website":"php.cn","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"},{"nickname":"蔡宝坚","website":"jb51.net","youzhi":"2.5","time":"3分钟前"}],"pageCount":2,"pageNo":1,"pageSize":10,"totalSize":20
});静的インターフェースのコールバックも使用できることがわかりました。静的処理はサーバーの負荷を大幅に軽減し、コンテンツ生成を高速化します。これは、トラフィックの多い Web サイトに必要な処理方法です。
jQuery の ajax メソッドは、ウォーターフォール フローをトリガーするページングを実装します
1. Ajax を通じて次のページのコンテンツを取得します
Web ページには次の HTML 構造のナビゲーションが必要です。next_link は次のページの URL です。
<div id="page_nav"> <a href="next_link">下一页</a> </div>
対応する css
#page_nav {clear: both; text-align: center; }
次のコードは、Ajax を通じて次のページのコンテンツを取得し、現在のコンテンツの末尾に追加します。
nextHref = $("#next_page a").attr("href");
// 给浏览器窗口绑定 scroll 事件
$(window).bind("scroll",function(){
// 判断窗口的滚动条是否接近页面底部
if( $(document).scrollTop() + $(window).height() > $(document).height() - 10 ) {
// 判断下一页链接是否为空
if( nextHref != undefined ) {
// Ajax 翻页
$.ajax( {
url: $("#page_nav a").attr("href"),
type: "POST",
success: function(data) {
result = $(data).find("#thumbs .imgbox");
nextHref = $(data).find("#page_nav a").attr("href");
$("#page_nav a").attr("href", nextHref);
$("#thumbs").append(result);
}
});
} else {
$("#page_nav").remove();
}
}
});
2. 追加コンテンツの流動的なレイアウトを作成します
jQuery に慣れている子供は、Ajax を介してページに挿入された要素に対して js が機能しないことを知っているはずですが、ここで変更を加える必要はありません。 live () やその他の処理の使用など、Masonry は内部で同様の処理をすでに実行しており、デフォルトで有効になるため、Ajax が正常に実行された後にコールバック関数で masonry() メソッドを呼び出すだけで済みます。
$newElems = $result;
$newElems.imagesLoaded(function(){
$container.masonry( 'appended', $newElems, true );
});3. Ajax ページめくりプロセスを変更する
上記のプロセスでは、すでに完全なウォーターフォール フロー レイアウトが存在しますが、ページめくりプロセス中にプロンプトは表示されず、複数の画像を直接挿入するとユーザー エクスペリエンスに影響を与える可能性があります。したがって、ページめくりプロセスにいくつかの変更を加える必要があります。完全なコードを以下に示します。
新しいコンテンツが読み込まれている、または最後のページに到達したことを示すために、ここに次の要素を追加する必要があります。
<div id="page_loading"> <span>给力加载中……</span> </div>
対応する CSS
#page_loading {display: none; background: #111111; opacity: 0.7; height: 60px; width: 220px; padding: 10px; position: absolute; bottom: -50px; left: 330px; }以下は完全な Ajax ページめくりコードです
nextHref = $("#next_page a").attr("href");
// 给浏览器窗口绑定 scroll 事件
$(window).bind("scroll",function(){
// 判断窗口的滚动条是否接近页面底部
if( $(document).scrollTop() + $(window).height() > $(document).height() - 10 ) {
// 判断下一页链接是否为空
if( nextHref != undefined ) {
// 显示正在加载模块
$("#page_loading").show("slow");
// Ajax 翻页
$.ajax( {
url: $("#page_nav a").attr("href"),
type: "POST",
success: function(data) {
result = $(data).find("#thumbs .imgbox");
nextHref = $(data).find("#page_nav a").attr("href");
$("#page_nav a").attr("href", nextHref);
$("#thumbs").append(result);
// 把新的内容设置为透明
$newElems = result.css({ opacity: 0 });
$newElems.imagesLoaded(function(){
$container.masonry( 'appended', $newElems, true );
// 渐显新的内容
$newElems.animate({ opacity: 1 });
// 隐藏正在加载模块
$("#page_loading").hide("slow");
});
}
});
} else {
$("#page_loading span").text("木有了噢，最后一页了！");
$("#page_loading").show("fast");
setTimeout("$('#page_loading').hide()",1000);
setTimeout("$('#page_loading').remove()",1100);
}
}
});ページングをトリガーするウォーターフォール フローの AJAX 実装とウォーターフォール フローをトリガーするページネーションの詳細については、関連記事を参照してください。PHP 中国語 Web サイトに注目してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
