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

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

1. 関数分析:

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

2. 実装方法:

ウィンドウのスクロールイベント l は処理関数にバインドされています: 次の作業を行います:
1. 最後の行の画像が表示領域に入ったかどうかを判断するにはどうすればよいですか?
If: ブラウザの表示領域の上部から最後の行の画像の距離値が、(表示領域の高さ + スクロールバーのスライドの距離値) より小さい場合
Then: 次のように判断できます。この画像はブラウザの表示領域に入っています。 2. AJAX を使用してサーバー データをリクエストする方法
3. データを対応するキューにブロードキャストします。 $.eachループで対応するJSONを取得します 対応するカラムにデータが入ります

$(function(){ 
//判断每个UL的最后一个LI，是否进入可视区域 
function see(objLiLast){ 
//浏览器可视区域的高度 
var see = document.documentElement.clientHeight; 
//滚动条滑动的距离 
var winScroll = $(this).scrollTop(); 
//每个UL的最后一个LI，距离浏览器顶部的 
var lastLisee = objLiLast.offset().top 
return lastLisee < (see+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里面的list数据遍历 
$.each(data.list,function(keyList,ovalue){ 
//对LIST里面的SRC数组遍历,取到图片路径 
$.each(ovalue,function(keySrc,avalue){ 
$.each(avalue,function(keysrc1,value1){ 
var imgLi = $("<li><a href=&#39;&#39;><img src=&#39;" + value1 + "&#39; alt=&#39;&#39; /><p>11111</p></a></li>") 
$("ul").eq(keysrc1).append(imgLi); 
}) 
}) 
onOff = true; 
}) 
}) 
} 
}); 
}) 
})

3. 注意事項
AJAXリクエストを実行するとデータが送信されるため、返されるjSONデータを取得するまでにある程度の時間がかかります。 (データがある場合、UL に LI を挿入できます) このとき、ユーザーがスクロール バーを再度ドラッグすると、上記のコードの isSee は true を返すため、AJAX リクエストは再度実行されます。ここでは、制御する「スイッチ」を手動で設定する必要があります。

データのロードが完了し、対応するULが追加された場合のみ、再度ドラッグするときにこの「スイッチ」をオン、つまりonOffがtrueに設定されます;,

データのロードが完了した後は、各列の UL であり、最後には AJAX を通じて追加されたばかりの LI データがあるため、別の AJAX リクエストが存在する可能性があります。

その他の jQuery ウォーターフォール フロー フローティング レイアウト (1) (画像の AJAX 読み込みの遅延) 関連記事については、PHP 中国語 Web サイトに注目してください。