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

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 }

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

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

더보기

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)

3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. 최고의 그래픽 설정

3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션

1 몇 주 전 By DDD

R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법

3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

Atomfall에서 크레인 제어 키 카드를 찾을 수 있습니다

1 몇 주 전 By DDD

더보기

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

더보기

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7422

15

Cakephp 튜토리얼

1359

52

Steam의 계정 이름 형식은 무엇입니까?

76

11

Win11 활성화 키 영구

27

19

더보기