jquery版瀑布流

　　一個月前用jquery實現了瀑布流效果，看着當時的代碼有點難過……今天抽時間稍微修改了一下。額，如今看起來不是那麼難受了，就來和你們分享一下。廢話很少說，開始正題~

　　1、演示效果

 

　　2、html代碼

        <div class="header">header</div>
        <div class="box clearfix">
            <div class="waterFall">
                <ul>
                    <li>
                        <a href="#"><img src="images/image_1.png"/></a>
                        <div><strong>圖片1</strong></div>
                    </li>
                    <li>
                        <a href="#"><img src="images/image_2.png"/></a>
                        <div><strong>圖片2</strong></div>
                    </li>
                    <li>
                        <a href="#"><img src="images/image_3.png"/></a>
                        <div><strong>圖片3</strong></div>
                    </li>
                    <li>
                        <a href="#"><img src="images/image_4.png"/></a>
                        <div><strong>圖片4</strong></div>
                    </li>
                    <li>
                        <a href="#"><img src="images/image_5.png"/></a>
                        <div><strong>圖片5</strong></div>
                    </li>
                    <li>
                        <a href="#"><img src="images/image_6.png"/></a>
                        <div><strong>圖片6</strong></div>
                    </li>
                    <li>
                        <a href="#"><img src="images/image_7.png"/></a>
                        <div><strong>圖片7</strong></div>
                    </li>
                    <li>
                        <a href="#"><img src="images/image_8.png"/></a>
                        <div><strong>圖片8</strong></div>
                    </li>
                    <li>
                        <a href="#"><img src="images/image_9.png"/></a>
                        <div><strong>圖片9</strong></div>
                    </li>
                    <li>
                        <a href="#"><img src="images/image_10.png"/></a>
                        <div><strong>圖片10</strong></div>
                    </li>
                    <li>
                        <a href="#"><img src="images/image_11.png"/></a>
                        <div><strong>圖片11</strong></div>
                    </li>
                    <li>
                        <a href="#"><img src="images/image_12.png"/></a>
                        <div><strong>圖片12</strong></div>
                    </li>
                    <li>
                        <a href="#"><img src="images/image_13.png"/></a>
                        <div><strong>圖片13</strong></div>
                    </li>
                    <li>
                        <a href="#"><img src="images/image_14.png"/></a>
                        <div><strong>圖片14</strong></div>
                    </li>
                    <li>
                        <a href="#"><img src="images/image_15.png"/></a>
                        <div><strong>圖片15</strong></div>
                    </li>
                    <li>
                        <a href="#"><img src="images/image_16.png"/></a>
                        <div><strong>圖片16</strong></div>
                    </li>
                    <li>
                        <a href="#"><img src="images/image_17.png"/></a>
                        <div><strong>圖片17</strong></div>
                    </li>
                    <li>
                        <a href="#"><img src="images/image_18.png"/></a>
                        <div><strong>圖片18</strong></div>
                    </li>
                    <li>
                        <a href="#"><img src="images/image_19.png"/></a>
                        <div><strong>圖片19</strong></div>
                    </li>
                    <li>
                        <a href="#"><img src="images/image_20.png"/></a>
                        <div><strong>圖片20</strong></div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="footer"></div>

 　　3、css代碼

            .header {width: 1000px; height: 200px; background: url("images/header_bg.jpg") no-repeat; margin: auto; border: 1px solid #DDDDDD; box-shadow: 0 0 8px rgba(0,0,0,0.5)}
            .box {width: 1000px; margin: 10px auto; padding: 20px;}
            .waterFall {position: relative; height: auto;}
            .waterFall ul li {position: absolute; width: 200px; padding: 10px; border: 1px solid #CCCCCC; text-align: center; box-shadow: 0 0 5px rgba(0,0,0,0.5); background: #ffffff;}
            .waterFall ul li div {font-size: 16px;}
            .footer {width: 1000px; height: 200px; background: url("images/footer_bg.jpg") no-repeat top right; margin: auto; border: 1px solid #DDDDDD; box-shadow: 0 0 8px rgba(0,0,0,0.5)}

 　　4、js代碼

            /* 等圖片加載完成 */
            $(window).load(function(){
                var $waterFall = $(".waterFall"),
                        li = '<li>'+
                                '<a href="#"><img src=""/></a>'+
                                '<div><strong></strong></div>'+
                                '</li>',/* 要添加的li */
                        liWidth = $waterFall.find("li").outerWidth(true), /* li寬度*/
                        liHeight = [], /* li高度，隨機的，由圖片高度決定 */
                        liLeft = 0, /* li距離左邊位置 */
                        liTop = [], /* li距離頂部位置 */
                        leftDistance, /* li間距 */
                        rowCount = 4, /* 一行顯示的圖片個數 */
                        liAllCount = $waterFall.find("li").length, /* li總個數，也就是圖片總個數 */
                        scrollTop, /* 滾動條距離頂部的距離 */
                        boxWidth = $(".box").width(), /* 盒子寬度 */
                        wHeight, /* 窗口的高度 */
                        page = 0; /* json數組中顯示的頁數 */

                var event = {
                    init: function(){
                        /* 初始化li，給每一個li定位 */
                        $waterFall.find("li").each(function(){
                            var _index = $(this).index();
                            liTop[_index] = 0; /* 默認第一行圖片距離頂部距離爲0 */
                            event.getLeftAndTop(_index);
                        })
                    },
                    /* 設置li標籤left和top值，li定位 */
                    getLeftAndTop: function(index){
                        var _row = index % rowCount; /* 第幾列 */
                        leftDistance = (boxWidth - liWidth*rowCount)/(rowCount-1); /* li間距 */
                        liLeft = _row*(liWidth + leftDistance); /* 第index個圖片距離左邊距離 */
                        liHeight[index] = $waterFall.find("li").eq(index).outerHeight(true); /* 表示第index個圖片的高度 */
                        if(index < rowCount){ /* 第一行，距離頂部距離都爲0 */
                            $waterFall.find("li").eq(index).css({left: liLeft+"px",top: 0});
                        }else if(index >= rowCount){
                            liTop[_row] += liHeight[index - rowCount] + 10; /* 行數大於2，高度自身以上距離+間距 */
                            $waterFall.find("li").eq(index).css({left: liLeft+"px",top: liTop[_row]});
                        }
                        event.setMaxHeight();
                    },
                    /* 設計盒子高度，爲了放置footer */
                    setMaxHeight: function(){
                        var newLiTop = [],maxHeight;
                        for(var i = 0; i < liTop.length; i++){
                            newLiTop[i] = liTop[i] + liHeight[i]; /* 得出四列的高度數組 */
                        }
                        maxHeight = Math.max.apply(Math,newLiTop); /* 選出高度最大值 */
                        $waterFall.height(maxHeight); /* 賦值 */
                    },
                    scrollFun: function(){
                        scrollTop = $(document).scrollTop();
                        wHeight = $(window).height();
                        if (($(window).height() + $(window).scrollTop()) >= $(document).height() - 10) { /* 當窗口高度+滾動條高度大於文檔高度-10時觸發ajax */
                            $.ajax({
                                url: "js/imagesUrl.json",
                                dataType: "json",
                                success: function(result){
                                    if(result[page] != undefined){
                                        var i, max = result[page].page.length; /* max爲第page頁的圖片總個數 */
                                        for(i = 0; i< max; i++){
                                            $waterFall.find("ul").append(li);
                                            liAllCount = $waterFall.find("li").length - 1; /* 得出最末尾的index數 */
                                            $waterFall.find("li").eq(liAllCount).find("img").attr("src",result[page].page[i].url); /* 給圖片url賦值 */
                                            $waterFall.find("li").eq(liAllCount).find("strong").text("圖片"+i);
                                            event.getLeftAndTop(liAllCount); /* 調用圖片定位 */
                                        }
                                        page++; /* 頁數增長 */
                                    }
                                }

                            })
                            /* end ajax */
                        }
                    }
                }

                /*---------------------------調用事件-------------------------*/

                /* 初始化 */
                event.init();

                /* 觸發滾動條 */
                $(window).scroll(function(){
                    event.scrollFun();
                })

            })

 　　分析：

　　製做瀑布流以前，我就在想一想它是以什麼形式出現的？不就是看起來像瀑布同樣流線型出現的嘛（好抽象……）。圖片高度寬度呢？寬度爲固定值，li高度是由圖片高度決定的。何時讓圖片流動？就是當滾動條觸發某個臨界值時，開始加載一些新的圖片進來。總之就是由不少寬度固定高度不固定的圖片組成，在必定狀況下觸發事件加載新的圖片在盒子中。

　　init是初始化圖片，給每一個圖片按照某種規律定位。

　　getLeftAndTop是給圖片定位，這裏是根據圖片寬度和高度定位的。首先想一下，li的寬度固定而高度是不固定的，liLeft設置只需知道是第幾列和它們之間的間距便可，由於第n列全部圖片距離左邊的距離老是保持一致。第0列距離左邊爲0，第一列爲第0列的寬度+一個li間距，第二列爲第一列+第二列寬度+兩個li間距（列數*（li寬度+間距）），這樣就能得出結果：liLeft = _row*(liWidth + leftDistance)。

　　那如今有個問題，高度不固定那要怎麼定義呢？這個好辦，根據圖片高度來就ok了（提及來簡單，當時這個問題糾結了好久……）。我採起數組的方式，有多少列就有多少個數組（什麼意思？），咱們定義圖片top值是否是和它上面的圖片有關係？等於它上面圖片的高度值相加再加上之間的間距，好比：我如今要求第五張圖片的top值，就是第一張圖片的高度+它們之間的間距；第九張圖片就是第一張+第五張圖片高度+兩張圖片間距，以此類推，liTop += liHeight[index] + 10，可是有個問題圖片高度不同，你這樣作確定不行，全部圖片高度都相加了，我只須要我頭頂以上的高度！那改爲liTop[_row] += liHeight[index] + 10，也不行啊，這樣第一行也下面去了。那我對第一行單獨處理，top值設爲0，其餘行：liTop[_row] += liHeight[index - rowCount] + 10，如今liTop就能夠了。

　　那如今考慮setMaxHeight，其實前面也提到過，有四列，取裏面每列圖片加起來最大值的就能夠了，即：maxHeight = Math.max.apply(Math,newLiTop)。

　　最後就是加載圖片的問題，在json文件中定義圖片地址就能夠了，我這邊是以數組的方式實現：

　　這裏數組長度爲2，能夠以 result[p].page[i].url獲取裏面的url值，result[p]表示加載了p次，result[p].page[i]表示加載了p次的第i個url。json數組中引用page屬性，可能容易混淆，你們能夠本身定義，它就是表示圖片的個數。

　　但願這些能給你們一丁點幫助，若是有哪裏講得很差或者不對的對方歡迎指正，謝謝~　

下載代碼