jQuery 폭포 흐름 부동 레이아웃(1)(이미지의 AJAX 로딩 지연)_jquery

부동 레이아웃: HTML 구조의 열이 부동됩니다.

1. 기능 분석:

1. 사진이 보이는 영역에 들어가는지 확인합니다.
2. AJAX를 사용하여 서버 데이터를 요청합니다. . 데이터는 해당 대기열로 브로드캐스트됩니다.


2. 구현 방법:
창의 스크롤 이벤트에 처리 기능을 바인딩합니다. 다음 작업을 수행합니다. :
1. 마지막 줄의 그림이 가시 영역에 들어갔는지 어떻게 확인하나요?
If: 브라우저의 가시 영역 상단에서 마지막 행에 있는 그림의 거리 값이 (미끄러지는 가시 영역의 높이 스크롤 막대의 거리 값)
다음과 같을 수 있습니다. 이 사진이 브라우저에 들어간 것으로 확인되었습니다.
2. AJAX를 사용하여 서버 데이터를 요청하는 방법
$.getJSON() 메서드는 JSON 형식으로 데이터를 직접 요청합니다.
> $.each 루프를 사용하여 해당 JSON 데이터를 해당 열에 입력합니다.

코드 복사 코드는 다음과 같습니다.

$(function(){

//각 UL의 마지막 LI가 가시 영역에 들어가는지 확인
function see(objLiLast){
/ /브라우저 표시 영역 높이
var see = document.documentElement.clientHeight;
//스크롤 막대가 슬라이드되는 거리
var winScroll = $(this).scrollTop()//The 각 UL LI의 마지막 항목, 브라우저 상단으로부터의 거리
var lastLisee = objLiLast.offset().top
return lastLisee < (winScroll 참조)
}
//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에서 목록 데이터를 탐색합니다
$ .each(data .list,function(keyList,ovalue){
//LIST의 SRC 배열을 탐색하여 이미지 경로를 가져옵니다.
$.each(ovalue,function(keySrc,avalue){
$.each( avalue,function(keysrc1,value1){
var imgLi = $("

<11111

")
$("ul").eq(keysrc1).append(imgLi);
})
})
onOff = true;
})
})
}
})
})
})



3. 주의사항

AJAX 요청을 실행하면 데이터가 전송되기 때문에 반환된 JSON 데이터를 가져오는 데 일정 시간이 걸립니다. (데이터를 사용하면 UL에 LI를 삽입할 수 있습니다.) 이때 사용자가 스크롤 막대를 다시 드래그하면 위 코드의 isSee가 여전히 true를 반환하므로 AJAX 요청이 다시 실행됩니다. 여기서는 제어할 "스위치"를 수동으로 설정해야 합니다. 데이터 로딩이 완료되고 해당 UL이 추가된 후에야 다시 드래그하면 이 "스위치"가 켜집니다. 즉 onOff가 true로 설정됩니다., 데이터 로딩이 완료된 후에야 이는 각 열의 UL에는 마지막에 AJAX를 통해 추가된 LI 데이터가 더 있으므로 또 다른 AJAX 요청이 있을 수 있음을 의미합니다.


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