Disposition de positionnement absolu en cascade jQuery (2) (chargement AJAX retardé des images)

Disposition de positionnement absolu en cascade, la différence avec la disposition flottante est

1 La disposition est différente :
Positionnement absolu : placez tous les LI positionnés de manière absolue dans un UL
Disposition flottante : Plusieurs (généralement trois ou quatre) UL sont distribuées pour placer LI
2. AJAX est différent
Positionnement absolu : insérez simplement les données JSON demandées (bien sûr, il peut s'agir de données dans d'autres formats) dans l'UL. . Effectuez ensuite les réglages TOP et LEFT pour ce LI nouvellement inséré
Disposition flottante : insérez les données JSON demandées (bien sûr, il peut s'agir de données dans d'autres formats) respectivement dans l'UL correspondant, car il y a un positionnement absolu, donc il n'y a pas besoin de définir la position pour LI. Il sera automatiquement disposé vers le bas ;

1. Analyse des fonctions :

1. Positionnez chaque LI, c'est-à-dire définissez les valeurs HAUT et GAUCHE de chaque LI
2. Convertir les données AJAX, placées dans LI, insérées dans UL ;

2. Processus de mise en œuvre :

1. Définir la GAUCHE de LI
Dans quelle colonne ? Avec le nombre de colonnes multiplié par la largeur de chaque LI, nous pouvons déterminer la valeur GAUCHE
Trouver le modèle :
Maintenant, j'ai besoin de trois colonnes, puis le LI dans chaque colonne a un numéro de colonne commun (définissez-le vous-même 0.1.2 ou A.B.C, en bref, donnez une étiquette à ces trois colonnes) Ici, réglez-le sur
　　La première colonne du chiffre 0
　　La deuxième colonne du chiffre 1
　　La troisième colonne du chiffre 2
　Donc pour chaque rangée, Seuls trois LI peuvent être placés
Le premier LI est au N°0, le deuxième LI est au N°1, le troisième LI est au N°2
Le quatrième LI est au N°2 N°0, le cinquième LI est au n°1, et le sixième LI est au n°1 li est au n°2
Donc si on pense utiliser l'index modulo, on peut obtenir 0 1 2, 0 1 2 ...
Grâce à cela, nous pouvons juger dans quelle colonne LI se trouve
index%3 = 0 1 2, 0 1 2...
　Pourquoi devrions-nous modulo 3 ? Parce que nous avons besoin d'un cycle ? de trois nombres. Donc, si vous souhaitez obtenir une telle boucle à l'avenir, vous pouvez envisager l'opération modulo
2. Définissez la valeur de TOP
Parce que la valeur de hauteur totale de chaque colonne est différente. Nous devons donc configurer trois variables pour stocker les valeurs de hauteur des différentes colonnes.
Pourquoi devons-nous obtenir cette valeur ?
1. Lors du premier chargement, la valeur TOP de LI est définie en fonction de la valeur actuelle de la hauteur de colonne
2 Parce que les données LI après la requête AJAX doivent être insérées dans l'UL ; nécessaire de connaître la hauteur totale actuelle de la hauteur actuelle de la colonne, puis de donner le nouveau LI comme valeur TOP
En fait, il y a beaucoup à dire au milieu ; Mais c'est trop long. Les commentaires dans mon code sont également clairement écrits. Si vous avez des questions, vous pouvez laisser un message pour communiquer avec moi. ! !
Une chose à mentionner est qu'il contient de nombreuses fonctions similaires, et je les ai écrites dans une FONCTION pour un appel facile. Par exemple, pour définir le HAUT et la GAUCHE de LI, pour obtenir le nombre de colonnes de LI et pour définir la hauteur totale des colonnes. Ce sont tous des blocs publics et fonctionnels, il est donc préférable de les écrire en tant que fonctions distinctes ;

(function($){ 
$.fn.extend({ 
waterfall:function(value){ 
value=$.extend({ 
jsonUrl:"", 
dataType:"", 
cloum:"", 
liWidth:"" 
},value) 
//引用包函布瀑布流的DIV对象 
var $this = $(this); 
//存放列的充号 
var colmLeftIndex = 0; 
//用来存放每一列的高度值； 
var liHeight_0 = 0; 
var liHeight_1 = 0; 
var liHeight_2 = 0; 

//设置列的序号 
function getcolums(col){ 
colmLeftIndex = col%value.cloum; 
} 
//设置当前列的高度 
function getLiHeight(colIndex,hei){ 
switch(colIndex){ 
case 0: 
liHeight_0 += hei 
break; 
case 1: 
liHeight_1 += hei; 
break; 
case 2: 
liHeight_2 += hei; 
break; 
} 
} 
//设置每一个LI的TOP和LEFT 
function setLiOffset(oli,liH){ 
switch(colmLeftIndex){ 
case 0 : 
oli.css({"left":value.liWidth*colmLeftIndex,"top":liHeight_0}); 
getLiHeight(colmLeftIndex,liH); 
console.log(liHeight_0); 
break; 
case 1: 
oli.css({"left":value.liWidth*colmLeftIndex,"top":liHeight_1}); 
getLiHeight(colmLeftIndex,liH); 
break; 
case 2: 
oli.css({"left":value.liWidth*colmLeftIndex,"top":liHeight_2}); 
getLiHeight(colmLeftIndex,liH); 
break; 
} 
} 

//初次加载时，遍历所有的LI，并定位每一个LI的TOP和LEFT值 
$this.find("li").each(function(index, element){ 
//当前LI的引用 
var $liThis = $(this); 
//获得当前LI的高度值 
var liH = $liThis.outerHeight(); 
//获得当前列的序号 
getcolums(index); 
//把当前LI的高度值存到相应的列的总高度变量中 
setLiOffset($liThis,liH) 

}); 
//判断每个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的一个“开关” 
$this.children("ul").each(function(index, element) { 
//引用当前的UL 
var ulThis = this; 
//引用最后一个LI 
var lastLi = $("li:last",ulThis); 
//调用是否进入可视区域函数 
var isSee = see(lastLi); 
if(isSee && onOff){ 
onOff = false; 
//发送AJAX请求，载入新的图片 
$.ajax({ 
url:value.jsonUrl, 
dataType:value.dataType, 
success: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>") 
//这里开始和浮动布局不一样了。其它部分在调用AJAX的时候，是一样的；因为这里不需要指定插入到那个UL； 
$this.children("ul").append($imgLi); 
//获取这个新插入到页面中的LI的列的序号 
var _liindex = $imgLi.index(); 
getcolums(_liindex); 
//获取这个新插入到页面中的LI的高度值 
var _nlih = $imgLi.outerHeight(); 
//设置当前LI的TOP和LEFT 
setLiOffset($imgLi,_nlih); 
}) 
}) 
onOff = true; 
}) 
} 
}) 
} 
}); 
}) 
} 
}) 
})(jQuery)

Pour plus d'articles sur la disposition de positionnement absolu du flux de cascade jQuery (2) (Chargement AJAX retardé des images), veuillez faites attention au site Web chinois PHP !