jQuery는 폭포 흐름layout_jquery를 구현합니다.

").addClass('pic').appendTo($(oBox));
$("").attr("src","images/" $(value).attr("src")).appendTo(oPic);
             });
폭포();
         }
})
});
//흐름 레이아웃 주요 기능;
함수 폭포 () {
var $boxs=$("#main>div");
//#main 요소 아래의 직계 하위 요소 div.box를 가져옵니다.
//각 열의 너비를 가져옵니다.
var w=$boxs.eq(0).outerWidth();
//outerWidth()는 패딩과 테두리를 포함한 너비를 가져옵니다.
//var w=$boxs.eq(0).width();
//width()는 요소에 정의된 너비만 가져올 수 있습니다.
var cols=Math.floor($(window).width()/w);
//가져올 열 수
$("#main").width(w*cols).css("margin","0 auto");
//#main 요소의 너비와 센터링 스타일을 설정합니다.
var hArr=[];
//각 열의 높이 설정;
$boxs.each(함수(색인,값) {
//각 상자 요소를 탐색합니다.
//이전의 모든 요소 중 가장 낮은 지점을 찾으려면 이 요소를 가장 낮은 지점 아래로 설정하세요.
        var h=$boxs.eq(index).outerHeight();
//각 상자 요소의 높이
             if (색인<열) {
hArr[색인]=h;
//각 열의 첫 번째 요소 높이를 결정합니다.
           } 그 외{
            var minH=Math.min.apply(null,hArr);
//열 높이 배열에서 최소 높이를 구합니다.
            var minHIndex=$.inArray(minH,hArr);
//$.inArray() 메소드는 배열(hArr)에 있는 요소(minH)의 인덱스 값을 가져옵니다.
//console.log(값);
//이때의 값은 첫 번째 줄 이후의 모든 box 요소의 DOM 객체입니다!;
$(값).css({
//$(value): jQuery 메소드를 계속 사용하기 전에 DOM 객체를 jQuery 객체로 변환합니다.
"위치":"절대",
"top":minH "px",
"왼쪽":minHIndex*w "px"
             });
hArr[minHIndex] =$boxs.eq(index).outerHeight();
//가장 낮은 요소의 높이 가장 낮은 높이에 방금 추가된 요소의 높이 = 새 열 높이;
          };
});
// console.log(hArr);
};
함수 checkScrollSlide() {
var $lastBox=$("#main>div").last();
var lastBoxDis=$lastBox.offset().top Math.floor($lastBox.outerHeight()/2);
var scrollTop=$(window).scrollTop();
var documentH=$(window).height();
반환(lastBoxDis }