jQuery實作瀑布流的取巧做法分享_jquery-js教程-PHP中文網

分析：瀑布流，做法有2種

（1）絕對定位方案：每個單元格設定為絕對定位，透過計算，分別設定 top , left 即可實現

（2）浮動方案：弄N列佈局（浮動），然後圖片數據，依序依序插入，如N為3列，第一張圖片插入到第一列，第二張圖片插入到第二列，第三張圖片插入到第三列，第四張圖片插入到第一列........這樣循環插入（不能自適應）

CSS與HTML代碼：

　　body,ul,li{margin:0;margin:0;}

    ul{list-style:none;}

    .clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both; height:0;}.clearfix{*zoom:1}

    /*瀑布流*/

    .wallList{width:860px;}

    .wallList li{float:left;display:inline;margin-right:16px;}

    .wallList li a{background:#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 個參數，所以就需要用aplly來擴展，Math.min. apply(null,[xxx,xxx,xxxx,xxxx])
（2）給window 綁定scroll事件，下拉的時候取得$(document).scrollTop() ，當$(document).scrollTop() 大於最小的高度值，就ajax請求url，如果有數據，就往頁面插入HTML結構，沒有則提示“加載完”，然後window解綁此事件

複製程式碼程式碼如下:

// 資料格式
    var testJson = {
        「狀態」：1，
        「資料」：[
{"href":"http:xxxxxx","src":"http://dummyimage.com/240x300/B5E61D/fff","寬度":240,"高度":300,"名稱":"圖片1"},
{"href":"http:xxxxxx","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:xxxxxx","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:xxxxxx","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:xxxxxx","src":"http://dummyimage.com/240x300/B5E61D/fff","寬度":240,"高度":300,"名稱":"圖片21"},
{"href":"http:xxxxxx","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,//滾動判斷的數值
            row = 3,//列數
            page = 1,//ajax請求的頁碼值
            url = 'xxxx', //ajax請求位址
            on_off = true; //插入結構的開關，以防止ajax錯誤性重複資料
        return{
            fillData:function(callback){
                var _that = this;
                on_off = false;
                /* ajax
                --------------------*/
                // $.get(url,{ page:page,count:30 },function(json){
                //     if(json.status==1){
                //        _that.appendHTML(json.data);
                //         on_off = true;
                //         page ;
                //     }else{
                //        _that.loadedTips();
                //     }
                // },'json');
                /* 類比測試-設定定時器模擬ajax請求資料
                -----------------------*/
                setTimeout(function(){
                    // 類比終止
                    if(page==3){
                       _that.loadedTips();
                        return;
                    }
                    _that.appendHTML(testJson.data);
                    on_off = true;
                    page ;                                 },400);
            },
            appendHTML:function(data){
                var len = data.length,
                    n = 0;
                for(;n                     var k = 0;
                    n>(row-1)?k=n%row:k=n;
                    $li[k].innerHTML = '

' data[n].name '';
                }
                this.getOTTop();
            },
            getOTTop:function(){
                oTop = Math.min.apply(null,[$li.eq(0).height(),$li.eq(1).height(),$li.eq(2).height()]) $target .offset().top;
            },
            載入提示：function(){
                $('#loadTips').find('span').text('資料已載入完成');
                setTimeout(function(){
                    $('#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();