jQuery-Wasserfallfluss-Floating-Layout (1) (verzögertes AJAX-Laden von Bildern)

Floating-Layout: Die Spalten der HTML-Struktur sind schwebend.

1. Funktionsanalyse:

1. Bestimmen Sie, ob das Bild in den sichtbaren Bereich gelangt.
2. Verwenden Sie AJAX, um Serverdaten anzufordern entsprechende Warteschlange;

2. Implementierungsmethode:

Binden Sie eine Verarbeitungsfunktion an das Scroll-Ereignis l des Fensters: Führen Sie die folgende Arbeit aus:
1. So ermitteln Sie, ob das Bild in Die letzte Zeile ist in den sichtbaren Bereich eingetreten?
Wenn: Der Abstandswert zwischen einem Bild in der letzten Zeile und dem oberen Rand des sichtbaren Bereichs des Browsers kleiner ist als (die Höhe des sichtbaren Bereichs + der Abstandswert des Schiebebalkens);
Dann: Sie kann feststellen, dass dieses Bild in den sichtbaren Bereich des Servers gelangt ist.
2. So verwenden Sie AJAX, um Serverdaten anzufordern.
Die Methode $.getJSON() fordert Daten direkt im JSON-Format an 🎜> 3. Übertragen Sie die Daten in die entsprechende Warteschlange;
Verwenden Sie die $.each-Schleife, um die entsprechenden JSON-Daten in die entsprechende Spalte einzugeben

$(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; 
}) 
}) 
} 
}); 
}) 
})

Erst wenn die Daten geladen und die entsprechende UL hinzugefügt wurde, wird dieser „Schalter“ beim erneuten Ziehen aktiviert, d Jeder In der UL der Spalte werden am Ende weitere LI-Daten hinzugefügt, die gerade über AJAX hinzugefügt wurden, sodass eine weitere AJAX-Anfrage erfolgen kann.

Weitere Artikel zum jQuery-Wasserfallfluss-Floating-Layout (1) (verzögertes AJAX-Laden von Bildern) finden Sie auf der chinesischen PHP-Website!