Disposition flottante du flux de cascade jQuery (1) (chargement AJAX retardé des images)

Mise en page flottante : Les colonnes de la structure HTML sont flottantes.

1. Analyse des fonctions :

1. Déterminez si l'image entre dans la zone visible
2. Utilisez AJAX pour demander des données au serveur
3. Diffusez les données vers le serveur ; File d'attente correspondante ;

2. Méthode d'implémentation :

Lier une fonction de traitement à l'événement de défilement l de la fenêtre : Effectuer le travail suivant :
1. Comment déterminer si l'image dans la dernière ligne est entrée dans la zone visible ?
Si : La valeur de distance d'une image dans la dernière ligne depuis le haut de la zone visible du navigateur est inférieure à (la valeur de distance de la barre de défilement en hauteur de la zone visible glissante
Alors : cela peut être) ; déterminé que cette image est entrée dans le navigateur La zone visible de > Utilisez la boucle $.each pour saisir les données JSON correspondantes dans la colonne correspondante


3. Notes
Lors de l'exécution d'une requête AJAX, il y a Ce sont des données en cours de transmission, il faut donc un certain temps pour obtenir les données jSON renvoyées. (Avec les données, LI peut être inséré dans UL) À ce stade, si l'utilisateur fait à nouveau glisser la barre de défilement, isSee dans le code ci-dessus renvoie toujours true, donc la requête AJAX sera à nouveau exécutée ; Ici, nous devons définir manuellement un "commutateur" à contrôler.

Ce n'est que lorsque les données sont chargées et l'UL correspondant ajouté que ce "commutateur" est activé lors d'un nouveau glisser, c'est-à-dire que onOff est défini sur true ;,

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

Parce qu'une fois les données chargées, cela signifie que each Dans l'UL de la colonne, il y a plus de données LI qui viennent d'être ajoutées via AJAX à la fin, il peut donc y avoir une autre requête AJAX.

Pour plus d'articles sur la disposition flottante du flux de cascade jQuery (1) (chargement AJAX retardé des images), veuillez faire attention au site Web PHP chinois !