집 >웹 프론트엔드 >JS 튜토리얼 >jQuery는 폭포 흐름layout_jquery를 구현합니다.

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

WBOY원래의: 2016-05-16 16:27:322150검색

HTML

复主代码代码如下:

CSS

复主代码代码如下:

 * {

     여백: 0;

     패딩: 0;

 }

 #메인 {

     위치: 상대;

 }

 .box {

     패딩:15px 0 0 15px;

     부동:왼쪽;

 }

 .pic {

     패딩: 10px;

     테두리: 1px 실선 #ccc;

     테두리 반경: 5px;

     상자 그림자: 0px 0px 5px #ccc;

     img {

         너비:165px;

         높이:자동;

     }

 }

자바스크립트

复主代码代码如下:

$(window).on("load",function () {
폭포();
var dataInt = { "data":[{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src": "6.jpg"}]}
//json 데이터를 시뮬레이션합니다.
$(window).on("스크롤",function () {
if(checkScrollSlide){
$.each(dataInt.data,function (키, 값) {
var oBox=$("

").addClass("box").appendTo($("#main"));
//jQuery는 연결 및 암시적 반복을 지원합니다.
var oPic=$("

").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 }

자세한 설명은 댓글을 잘 참고해 주시고 따로 적지는 않겠습니다.

성명：

이전 기사：컨텐츠를 Clipboard_javascript 기술에 복사하기 위해 주류 브라우저와 호환되는 JS다음 기사：컨텐츠를 Clipboard_javascript 기술에 복사하기 위해 주류 브라우저와 호환되는 JS

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

관련 기사