jQuery 워터폴 절대 위치 지정 레이아웃(2)(이미지의 AJAX 로딩 지연)

폭포 흐름-절대 위치 지정 레이아웃, 부동 레이아웃과의 차이점은

1입니다. 레이아웃이 다릅니다.
절대 위치 지정: 모든 절대 위치 지정 LI를 UL에 배치합니다.
부동 레이아웃: LI를 배치하기 위해 여러 개의(보통 3개 또는 4개) UL이 배포됩니다.
2. AJAX는 다릅니다.
절대 위치 지정: 요청된 JSON 데이터(물론 다른 형식의 데이터일 수도 있음)를 UL에 삽입하기만 하면 됩니다. . 그런 다음 새로 삽입된 LI에 대해 TOP 및 LEFT 설정을 수행합니다.
부동 배열: 절대 위치 지정이 있으므로 요청된 JSON 데이터(물론 다른 형식의 데이터일 수 있음)를 각각 해당 UL에 삽입합니다. LI의 위치를 ​​설정해야 합니다.

1. 기능 분석:

1. 각 LI의 위치, 즉 각 LI의 TOP 및 LEFT 값을 설정합니다.
2. LI에 배치된 AJAX 데이터를 UL에 삽입합니다.

2. 구현 프로세스:

1. LI의 LEFT를 설정합니다.
어느 열에 있습니까? 열 수에 각 LI의 너비를 곱하면 LEFT 값을 결정할 수 있습니다.
패턴 찾기:
이제 세 개의 열이 필요하고 각 열의 LI에는 공통 열 번호가 있습니다(직접 설정) 0.1.2 또는 A.B.C, 줄여서 이 세 열에 라벨을 붙인다) 여기서는
　　숫자 0의 첫 번째 열
　　숫자 1의 두 번째 열
　　숫자 2의 세 번째 열
　따라서 각 행에는 3개의 LI만 배치할 수 있습니다.
첫 번째 LI는 0번, 두 번째 LI는 1번, 세 번째 LI는 2번
네 번째 LI는 에 있습니다. 0번, 다섯 번째 LI는 1번, 여섯 번째 LI는 1번, li는 2번
그래서 인덱스 모듈로를 사용한다고 생각하면 정확히 0 1 2, 0 1을 얻을 수 있습니다. 2...
이를 통해 LI가 어느 열에 있는지 판단할 수 있습니다.
index%3 = 0 1 2, 0 1 2...
　모듈로 3을 구해야 하는 이유는 무엇입니까? 세 숫자의 순환. 따라서 나중에 이러한 루프를 얻으려면 모듈로 연산을 고려해 볼 수 있습니다.
2. TOP 값을 설정합니다.
각 열의 총 높이 값이 다르기 때문입니다. 따라서 서로 다른 열의 높이 값을 저장하려면 세 가지 변수를 설정해야 합니다.
이 값을 구해야 하는 이유는 무엇입니까?
1. 처음 로드할 때 현재 컬럼 높이 값을 기준으로 LI의 TOP 값이 설정됩니다.
2. AJAX 요청 이후의 데이터 LI가 UL에 삽입되기 때문에; 현재 열의 현재 전체 높이를 알아야 하며 새 LI를 TOP 값으로 지정해야 합니다.
사실 중간에 할 말이 많습니다. 하지만 너무 깁니다. 내 코드의 주석도 명확하게 작성되었습니다. 질문이 있으시면 메시지를 남겨서 저와 소통하실 수 있습니다. ! !
한 가지 말씀드릴 점은 비슷한 기능이 많이 있는데, 쉽게 호출할 수 있도록 FUNCTION으로 작성해 두었습니다. 예를 들어 LI의 TOP과 LEFT를 설정하고, LI의 열 개수를 구하고, 열의 총 높이를 설정하는 것입니다. 이들은 모두 공개 및 기능 블록이므로 별도의 함수로 작성하는 것이 좋습니다.

(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)

더 많은 jQuery 워터폴 흐름 절대 위치 지정 레이아웃(2)(이미지의 지연된 AJAX 로딩) 관련 기사를 참조하세요. PHP 중국어 웹사이트를 주목하세요!