jQuery_jquery를 사용하여 워터폴 흐름 구현에 대한 팁 공유

분석: 폭포수 흐름, 두 가지 방법이 있습니다

(1) 절대 위치 지정 방식: 각 셀은 계산을 통해 위쪽과 왼쪽을 각각 절대 위치로 설정합니다.

(2) 플로팅 방식: N열 레이아웃(플로팅)을 만든 후 그림 데이터를 순서대로 삽입합니다. 예를 들어 N이 3열이면 첫 번째 그림이 첫 번째 열에 삽입되고 두 번째 그림이 삽입됩니다. 두 번째 열에 세 번째 그림이 삽입되고, 세 번째 열에 네 번째 그림이 삽입되고, 첫 번째 열에 네 번째 그림이 삽입되는데... 이렇게 루프에 삽입됩니다(적응 불가)

CSS 및 HTML 코드:

코드 복사 코드는 다음과 같습니다.

​body,ul,li{margin:0;margin:0;}
ul{목록 스타일:없음;}
.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both height:0;}.clearfix{*zoom:1}
/*폭포*/
.wallList{너비:860px;}
.wallList li{float:left;display:inline;margin-right:16px;}
.wallList li a{배경:#eee;border:1px solid #ccc;padding:5px 5px 0 5px;display:block;margin-bottom:10px;}
.wallList li a:hover{border-color:#f60;}
.wallList li .name{display:block;text-align:center;padding:8px 0;}
.loadTips{text-align:center;padding:15px 0;}

코드 복사 코드는 다음과 같습니다.

          

>                >                >                >            

로드 중...

jQuery를 사용하여 구현하면 일반적인 아이디어는 다음과 같습니다.

(1) N열에서 가장 작은 높이 값을 구합니다. JS에서 제공하는 API는 Math.min()인데, 이 API는 최대 2개의 매개변수만 전달할 수 있으므로 Math.min을 확장하려면 aplly를 사용해야 합니다. . 적용(null,[xxx,xxx,xxxx,xxxx]) (2) 스크롤 이벤트를 창에 바인딩하고 아래로 당길 때 $(document).scrollTop()을 가져옵니다. $(document).scrollTop()이 최소 높이 값보다 큰 경우 ajax로 URL을 요청합니다. 데이터를 페이지로 이동하여 HTML 구조를 삽입하세요. HTML 구조가 없으면 "로드 완료" 메시지가 표시되고 창에 이 이벤트가 바인딩 해제됩니다.

코드 복사

코드는 다음과 같습니다.

// 数据格式
    var testJson = {
        "상태":1,
        "데이터":[
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x300/B5E61D/fff","너비":240,"높이":300,"이름":"그림 1"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x210/333/fff","너비":240,"높이":210,"이름":"그림 2"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x190/f60/fff","너비":240,"높이":190,"이름":"그림 3"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x230/B5E61D/fff","너비":240,"높이":230,"이름":"그림 4"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x280/B5E61D/fff","너비":240,"높이":280,"이름":"그림 5"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x260/eee/fff","너비":240,"높이":260,"이름":"그림 6"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x180/000/fff","너비":240,"높이":180,"이름":"그림 7"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x240/B5E61D/fff","너비":240,"높이":240,"이름":"그림8"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x265/B5E61D/fff","너비":240,"높이":265,"이름":"그림9"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x245/259/fff","너비":240,"높이":245,"이름":"그림 10"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x310/B5E61D/fff","너비":240,"높이":310,"이름":"그림 11"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x210/B5E61D/fff","너비":240,"높이":210,"이름":"그림 12"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x150/B5E61D/fff","너비":240,"높이":150,"이름":"그림 13"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x165/B5E61D/fff","너비":240,"높이":165,"이름":"그림 14"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x100/B5E61D/fff","너비":240,"높이":100,"이름":"그림 15"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x280/B5E61D/fff","너비":240,"높이":280,"이름":"그림 16"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x225/B5E61D/fff","너비":240,"높이":225,"이름":"그림 17"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x210/B5E61D/fff","너비":240,"높이":210,"이름":"그림 18"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x230/B5E61D/fff","너비":240,"높이":230,"이름":"그림 19"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x210/B5E61D/fff","너비":240,"높이":210,"이름":"그림 20"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x300/B5E61D/fff","너비":240,"높이":300,"이름":"그림 21"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x210/333/fff","너비":240,"높이":210,"이름":"그림 22"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x190/f60/fff","너비":240,"높이":190,"이름":"그림 23"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x230/B5E61D/fff","너비":240,"높이":230,"이름":"그림 24"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x280/B5E61D/fff","너비":240,"높이":280,"이름":"그림 25"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x210/eee/fff","너비":240,"높이":210,"이름":"그림 26"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x180/000/fff","너비":240,"높이":180,"이름":"그림 27"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x240/B5E61D/fff","너비":240,"높이":240,"이름":"그림 28"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x195/B5E61D/fff","너비":240,"높이":195,"이름":"그림 29"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x245/259/fff","너비":240,"높이":245,"이름":"그림 30"}
        ]
    }
    var wallPic = function(){
        var $target = $('#wallList'),
            $li = $target.find('li'),
            $tips = $('#loadTips'),
oTop = 0, //판정값 스크롤
              행 = 3,//열 수
~ ~                                     . ​​​​​​ url = 'xxxx', //ajax 요청주소
On_off = TRUE; // AJAX가 여러 번 데이터를 잘못 로드하는 것을 방지하기 위해 구조체의 스위치를 삽입합니다
        반품{
             fillData:function(콜백){
~ ~ on_off = 거짓;
                        /* 아약스
--------*/
// $.get(url,{ 페이지:페이지, 개수:30},function(json){
                                                                                                                                                                                                                                                 ​ ~ ~ // ~                           ~                          // ~ ~ ~                              ​ ~ ~   //                                               // },'json');
/* 시뮬레이션 테스트 - 타이머 시뮬레이션 Ajax 요청 데이터 설정
---------------*/
                  setTimeout(function(){
// 시뮬레이션 종료
만약(페이지==3){
                          _that.loadedTips();
                        반품;
~                                                                       _that.appendHTML(testJson.data);
on_off = true;
                                                             },400);
            },
             추가HTML:함수(데이터){
              var len = 데이터.길이,
                       n = 0;
for(;n                 var k = 0;
                    n>(row-1)?k=n%row:k=n;
                    $li[k].innerHTML = '' 데이터[n].name '';
                }
                this.getOTop();
            },
            getOTop:함수(){
                oTop = Math.min.apply(null,[$li.eq(0).height(),$li.eq(1).height(),$li.eq(2).height()]) $target .offset().top;
            },
            로드된 팁:함수(){
                $('#loadTips').find('span').text('数据已加载完');
                setTimeout(함수(){
                    $('#loadTips').css({'visibility':'hidden'});
                },200);
                // 解绑事件
                $(window).unbind('scroll',$.proxy(this.scrollEvent,this));
            },
            스크롤이벤트:함수(){
                if($(document).scrollTop() $(window).height()>oTop&&on_off){
                    this.fillData();                       
                }
            },
            초기화:함수(){
                this.fillData();
                $(window).bind('scroll',$.proxy(this.scrollEvent,this));
            }
        }
    }();
    wallPic.init();