테스트 환경: ie8 ff13.0.1 chrome22 4개의 div를 순차적으로 페이징하여 얻은 내용을 채울 수 있습니다. 폭포수 흐름의 페이징은 여러 페이지(예: 5페이지) 단위로 두 번 페이징할 수 있으므로 이를 줄일 수 있습니다. 배경 알고리즘 복잡도 코드 복사 코드는 다음과 같습니다. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ;머리> 폭포 흐름 <br>본체{마진:0px;} <br>#main{너비:840px;마진:0 자동;} <br>.flow{float:left;width:200px;margin:5px;배경:#ABC;} <br> <br>$(document).ready(function(){ <br>// 초기화 내용<br>for(var i = 0 ; i < 3 ; i ){ <BR>$(".flow").each(function(){ <BR>$(this).append("<div style="width:90% ; 높이:" getRandom(200,300) "px;margin:5px auto; background:#159;"></div>") <br>} <br><br>$( window ).scroll(function(){ <br>// 스크롤할 높이<br>var scrollTop = document.body.scrollTop||document.documentElement.scrollTop; <br>// 페이지 높이<br>var pageHeight = $(document).height(); <br>//볼 수 있는 영역 높이<br>var viewHeight = $(window).height() <br>//alert(viewHeight)//스크롤할 때 하단에 도달<br>if((scrollTop viewHeight)>(pageHeight-20)){ <br>if(scrollTop<1000){//무제한 성장 방지<BR>for(var i = 0; i < ; 2 ; i ){ <BR>$(".flow").each(function(){ <BR>$(this).append("<div style="width:90%;height:" getRandom( 200,300) "px;margin:5px 자동;배경:#159;"></div>"); <br>}); <br>} <br>} <br>} <br>}); <br>}); <br>/* <br>* 지정된 범위에서 난수 가져오기<br>* @param min, 최소값<br>* @param max, 최대값<br>*/ <br> <br>function getRandom(min,max){ <br>//x의 상한, y의 하한<br>var x = max <br>var y = min; <br> x=min; <br>y=max; <br>} <br>var rand =parseInt(Math.random() * (x - y 1) y); } <br>
