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

플로팅 레이아웃: HTML 구조의 열이 플로팅됩니다.

1. 기능 분석:

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

2. 구현 방법:

창의 스크롤 이벤트 l에 처리 함수를 바인딩합니다. 다음 작업을 수행합니다.
1. 그림이 있는지 확인하는 방법 마지막 행이 볼 수 있는 영역에 들어왔습니까?
경우: 마지막 행의 그림과 브라우저의 표시 영역 상단 사이의 거리 값이 (표시 영역의 높이 + 스크롤 막대 슬라이딩의 거리 값)
다음: 이 사진이 브라우저에 진입했는지 확인할 수 있습니다.
2. AJAX를 사용하여 서버 데이터를 요청하는 방법
$.getJSON() 메서드는 JSON 형식으로 데이터를 직접 요청합니다. 🎜> 3. 해당 대기열에 데이터를 브로드캐스트합니다.
$.each 루프를 사용하여 해당 JSON 데이터를 해당 열에 입력합니다.

$(function(){ 
//判断每个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的一个“开关” 
$("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里面的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>") 
$("ul").eq(keysrc1).append(imgLi); 
}) 
}) 
onOff = true; 
}) 
}) 
} 
}); 
}) 
})

3. 참고 사항

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

더 많은 jQuery 워터폴 흐름 플로팅 레이아웃(1)(AJAX 이미지 로딩 지연) 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!