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

(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를 사용합니다.)