js瀑布流布局的實現

來源:互聯網
上載者:User

    說到瀑布流布局,先上張圖片來說明一下什麼是瀑布流好了。

      這個是我畢設中的一個截圖(內容是我暫時從其他網站上爬下來測試的….),那麼我們從這張圖片中就能看到大致來說瀑布流就是一些等寬不等高的圖片來排列展 示的,因為每張圖片都不一樣大,以及我在圖片下面展示了各種資訊都不一樣,所以導致這些展示的框它們的高度都不統一,那麼為什麼卻要要求它們之間的寬度相 同呢?這就是瀑布流實現的關鍵了。

      那麼我們就來一步步的說明它是如何?的,這個過程中也就理解了為什麼是這樣設計的了,首先,我們要在頁面中排列出所要展示的框的個數,下面是這個瀑布流的結構圖:

      這張圖片中白色的部分我們就當作是瀏覽器的可視地區了,那麼中間這個灰色的部分我給他取名叫做‘main’,用來存放中間展示的圖片,並且與頁面中的其他 元素分開,那麼第一個問題就來了,我們如何知道在這個main中到底改放幾張圖片呢?而且這個main的寬度又該怎麼定呢?上代碼!

#main{     position: relative; text-align: center; margin: 0 auto;}

     我們先給它設定一下相對定位,並將這個div設定成置中,這裡有個地方要注意的是,之前看了很多例子使用 text-align: center 將div置中後發現並不起效,那是因為在設定text-align的同時並沒有指定它的margin值,我們要將margin值也同時設定了之後置中的效 果才會生效,因為要和頁面頂部的導覽列配合,所以我在這裡將margin的第一個值設定為0,第二個設定為自動(auto),為什麼這麼設定呢?

     margin 簡寫屬性在一個聲明中設定所有外邊距屬性。該屬性可以有 1 到 4 個值。這個簡寫屬性設定一個元素所有外邊距的寬度,或者設定各邊上外邊距的寬度。在這裡要注意一下的是在css中,margin和padding這樣的屬 性設定值的時候都是順時針設定的,也就是上,右,下,左,這個順序來的。

      那麼當margin的值為四個的時候這4個的值依次為:上外邊距,右外邊距,下外邊距,左外邊距。

      當為三個值的時候順序依次為:上外邊距,左右外邊距,下外邊距。

      當為兩個值的時候順序依次為:上下外邊距,左右外邊距。

      當為一個值的時候就是全部的外邊距了。

      現在我們就要開始放圖片了,這也就是為什麼我們要使用等寬的圖片了,因為寬度固定我們才能動態算出不同大小的瀏覽器能放幾張圖片來展示了。

     這裡我並沒有先設定main的寬度,而是在計算出放置幾張圖片之後才設定它的寬度,因為我們不僅僅是展示圖片,還有圖片下面的內容,所以在計算每張圖片的 寬度的時候要將包裹圖片的容器也算進來,也就是上面圖片中紅色框的寬度,而且由於每個展示框之間還有margin值,所以我們在計算的時候也是要考慮的, 因為我使用的是jquery,所以在這裡我通過 outerWidth() 方法來取得寬度值。

//動態添加瀑布圖片的功能函數function waterfall(){    //取得展示框對象    var $boxs = $( "#main>div" );    // 一個塊框的寬    var w = $boxs.eq( 0).outerWidth();    //每行中能容納的展示框個數【視窗寬度除以一個塊框寬度】    var cols = Math.floor( ($( window ).width()-30) / w );    //給最外圍的main元素設定寬度和外邊距    $("#main").width(w*cols).css("margin","o auto");    //用於儲存 每列中的所有塊框相加的高度。    var hArr=[];    $boxs.each( function( index, value ){        var h = $boxs.eq( index).outerHeight();        if( index < cols ){            hArr[ index ] = h; //第一行中的num個塊框 先添加進數組HArr        }else{            var minH = Math.min.apply( null, hArr );//數組HArr中的最小值minH            var minHIndex = $.inArray( minH, hArr );            $( value).css({                "position":"absolute","top":minH+"px", "left":minHIndex*w + "px"            });            //數組 最小高元素的高 + 添加上的展示框[i]塊框高            hArr[ minHIndex ] += $boxs.eq( index).outerHeight();//更新添加了塊框後的列高        }    });}

    這裡的思路就是先取得瀏覽器的可視寬度,然後通過除以每個展示框的寬度來計算出一排可以展示多少個展示框的,然後通過一個數組 hArr來保持每一列的高度,我在這裡使用jquery中的each方法來迴圈儲存每一列的高度,這裡傳入的兩個參數,index是展示框的索引 號,value為這個展示框的jquery對象。

     首先根據索引號來取到對應展示框的高度,這個高度是包含了margin的全部寬度,然後將這個值儲存在數組中,由於之前求出了每一行最多的塊數,所以在這 裡進行一個判斷,將第一行首先填滿,然後開始填充第二排的展示框,我使用Math.min.apply()方法來取得數組中的最小值,然後通過 jquery提供的 inArray() 方法來取得最小值所在的是哪一列,第一個參數是最小值,第二個參數是需要判斷的數組,然後我們將對應的展示框填充進去,最後將新加入的展示框的完整高度加 上之前最小的高度重新儲存到數組中,繼續迴圈判斷,從而不斷的新增展示框。

      那麼現在我們就要通過後台傳來的json資料動態產生新的展示框來提供添加了,因為每個項目所要展示的內容都不一樣,我在這裡就不展示具體的代碼 了,接下來就是要通過監聽捲軸的滑動來判斷什麼時候開始動態添加新展示框了。

      接下來我就講一下我判斷的思路,首先是在第一組展示框添加完成後取得最後一個展示框的填充高度,然後加上這個展示框自身高度的一邊,因為我覺得使用者一般會 瀏覽到最後一個的附近的時候就該開始動態填充了,所以我在這裡就判斷當前捲軸滾動的距離是不是大於頁面預設的高度加上最後一個展示框到螢幕頂端的高度, 如果大於了說明就該繼續填充展示框了:

//監聽捲軸    window.onscroll=function(){        if(checkscrollside()){            AddWaterfall(dataInt);//這個是動態填充新展示框的函數            waterfall();        };    }//判斷是否需要繼續載入瀑布流function checkscrollside(){    var $lastBox = $("#main>div").last();    var lastBoxDis = $lastBox.offset().top + Math.floor($lastBox.outerHeight()/2);    var scrollTop = $(window).scrollTop();    var documentH = $(window).height();    return (lastBoxDis<scrollTop+documentH)?true:false;}

       現在整個瀑布流的展示就完成了,今天在這裡記錄下來,留已備用。



相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。