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

3. Hinweise

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

Bei der Ausführung eines AJAX Auf Anfrage werden Daten übertragen. Daher dauert es eine gewisse Zeit, bis die zurückgegebenen JSON-Daten abgerufen werden. (Mit Daten kann LI in UL eingefügt werden) Wenn der Benutzer zu diesem Zeitpunkt die Bildlaufleiste erneut zieht, gibt isSee im obigen Code immer noch true zurück, sodass die AJAX-Anfrage erneut ausgeführt wird. Hier müssen wir manuell einen „Schalter“ zur Steuerung einstellen.

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!