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

워터폴 흐름-절대 위치 지정 레이아웃과 플로팅 레이아웃의 차이점은

1입니다. 레이아웃이 다릅니다.
절대 위치 지정: 모든 절대 위치 지정 LI를 하나의 UL에 배치합니다.
플로팅 레이아웃: 다중(일반적으로) 3개 또는 4개) UL은 LI를 배포합니다.
2. AJAX는 다릅니다.
절대 위치 지정: 요청된 JSON 데이터(물론 다른 형식의 데이터일 수도 있음)를 UL에 삽입하기만 하면 됩니다. 그런 다음 새로 삽입된 LI에 대해 TOP 및 LEFT 설정을 수행합니다.
부동 배열: 요청된 JSON 데이터(물론 다른 형식의 데이터일 수 있음)를 해당 UL에 각각 삽입합니다. 왜냐하면 절대 위치 지정이 있기 때문입니다. LI의 위치를 ​​설정해야 합니다. 자동으로 아래쪽으로 정렬됩니다.

1. 기능 분석:

1. 각 LI의 위치, 즉 각 LI의 TOP 및 LEFT 값을 설정합니다. ;
2. AJAX 데이터를 LI에 넣고 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; 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;
}
//TOP 및 합계 설정 각 LI LEFT
함수 setLiOffset(oli,liH){
switch(colmLeftIndex){
case 0 :
oli.css({"left":value.liWidth*colmLeftIndex,"top" :liHeight_0} );
getLiHeight(colmLeftIndex,liH);
console.log(liHeight_0);
break;
사례 1:
oli.css({"left":value. liWidth*colmLeftIndex ,"top":liHeight_1});
getLiHeight(colmLeftIndex,liH);
break;
사례 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){
//Current LI reference
var $liThis = $(this) ;
//현재 LI의 높이 값 가져오기
var liH = $liThis.outerHeight()
//현재 열의 일련 번호 가져오기
getcolums(index); >//현재 LI 가져오기 높이 값은 해당 열의 전체 높이 변수에 저장됩니다.
setLiOffset($liThis,liH)

})//마지막 LI인지 판단합니다. 각 UL이 가시 영역에 들어갑니다
function see(objLiLast){
//브라우저의 가시 영역 높이
var see = document.documentElement.clientHeight
//스크롤 막대의 거리 Slides
var winScroll = $ (this).scrollTop();
//브라우저 상단의 각 UL의 마지막 LI
var lastLisee = objLiLast.offset().top
return lastLisee < (winScroll 참조) ?true:false
}
//AJAX "스위치" 실행 여부
var onOff =
$(window).scroll(function) (){
//드래그 스크롤바 이동 시 AJAX "스위치" 전송 여부
$this.children("ul").each(function(index, element) {
// 현재 UL 참조
var ulThis = this;//마지막 LI 참조
var lastLi = $("li:last",ulThis)//가시 영역 진입 여부 호출 function
var isSee = see(lastLi) ;
if(isSee && onOff){
onOff = false
//새 이미지를 로드하기 위해 AJAX 요청 보내기
$.ajax( {
url:value.jsonUrl,
dataType:value.dataType,
success:function(data){
//반환된 JSON의 목록 데이터 탐색
$.each(data .list,function(keyList,ovalue){
//LIST의 SRC 배열을 탐색하고 이미지 경로를 가져옵니다.
$.each(ovalue,function(keySrc,avalue){
$.each( avalue,function(keysrc1,value1){
var $imgLi = $("

< ;p>11111

")
//플로팅 레이아웃과 다릅니다. AJAX를 호출할 때 다른 부분은 동일합니다.
$this.children("ul").append($imgLi)//Get this new; insert 페이지 내 LI의 열 번호
var _liindex = $imgLi.index();
getcolums(_liindex)
//페이지에 새로 삽입된 LI의 높이 값 가져오기
var _nlih = $imgLi.outerHeight();
//현재 LI의 TOP 및 LEFT 설정
setLiOffset($imgLi,_nlih)
})
})
onOff = true;
})
}
})
}
})
})
}
})
})(jQuery)



DEMO 다운로드
(이렇게 하려면 로컬 컴퓨터에 서버 플랫폼을 설치해야 합니다. 저는 APACHE가 포함된 PHP 제품군 APPSERV를 사용합니다.)