jQuery ウォーターフォール フロー フローティング レイアウト (1) (画像の AJAX 読み込みの遅延)_jquery

フローティング レイアウト: HTML 構造の列はフローティングです。

1. 関数分析:

1. 画像が表示領域に入っているかどうかを判断します。
2. AJAX を使用してサーバー データを要求します。データは対応するキューにブロードキャストされます。


2. 実装方法:
ウィンドウのスクロール イベント l に処理関数をバインドします。 :
1. 最後の行の画像が表示領域に入ったかどうかを確認するにはどうすればよいですか?
場合: ブラウザの表示領域の上部から最後の行の画像の距離値が (表示領域のスライドの高さのスクロール バーの距離値) より小さい場合: 次のようになります。この画像がブラウザに表示された領域に入ったと判断します。
2. AJAX を使用してサーバー データをリクエストする方法。
$.getJSON() メソッドは、JSON 形式でデータを直接リクエストします。対応するキューに追加します。 > $.each ループを使用して、対応する JSON データを対応する列に入力します




コードをコピーします

コードは次のとおりです。 $(function(){ //各 UL の最後の LI が可視領域に入るかどうかを判断します。

function see(objLiLast){

/ /ブラウザの表示領域の高さ
var see = document.documentElement.clientHeight
//スクロール バーのスライド距離
var winScroll = $(this).scrollTop();各 UL LI の最後の 1 つ、ブラウザの上部からの距離
var lastLisee = objLiLast.offset().top
return lastLisee < (winScroll を参照)?true:false;
//AJAX "スイッチ" をリクエストするかどうか;
var onOff = true
$(window).scroll(function(){
//スクロール バーをドラッグするときに AJAX "スイッチ" を送信するかどうか;
$( "ul").each(function(index, element) {
//現在の UL を参照
var ulThis = this;
//最後の LI を参照
var lastLi = $("li :last",this);
//可視領域に入るかどうかの呼び出し
var isSee = see(lastLi);
if(isSee && onOff){
onOff = false;
//AJAX リクエストを送信し、新しいイメージをロードします
$.getJSON("test1.js",function(data){
//返された JSON 内のリスト データをスキャンします
$ .each(data .list,function(keyList,ovalue){
//LIST 内の SRC 配列を走査し、画像パスを取得します。
$.each(ovalue,function(keySrc,avalue){
$.each( avalue,function(keysrc1,value1){
var imgLi = $("

11111

")
$("ul").eq(keysrc1).append(imgLi);
})
})
onOff = true;
})
})
}
});
})
})



3. 注意事項

AJAXリクエストを実行するとデータが送信されるため、返されるjSONデータを取得するまでにある程度の時間がかかります。 (データがある場合、UL に LI を挿入できます) このとき、ユーザーがスクロール バーを再度ドラッグすると、上記のコードの isSee は true を返すため、AJAX リクエストは再度実行されます。ここでは、制御する「スイッチ」を手動で設定する必要があります。
データのロードが完了し、対応する UL が追加された後にのみ、再度ドラッグするときにこの「スイッチ」がオンになります。つまり、onOff が true に設定されます。

データのロードが完了した後は、これは、列の UL ごとに、最後に AJAX を介して追加されたばかりの LI データがあるため、別の AJAX リクエストが存在する可能性があることを意味します。
デモのダウンロード
(これには、ローカル マシンにサーバー プラットフォームをインストールする必要があります。私は APACHE を含む PHP スイート APPSERV を使用します)