前端頁面瀑布流布局的實現

轉眼間3個月沒有更新了…..最近莫名的迷戀上了前端各種效果的實現了…..最近就記錄一下我這幾天做畢設時使用的一些效果吧~

今天記錄的是我畢設中著重體現的布局風格--瀑布流布局。

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

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

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

這張中白色的部分我們就當作是瀏覽器的可視區域了，那麼中間這個灰色的部分我給他取名叫做『main』，用來存放中間展示的，並且與頁面中的其他元素分開，那麼第乙個問題就來了，我們如何知道在這個main中到底改放幾張呢？而且這個main的寬度又該怎麼定呢？上**！

#main

我們先給它設定一下相對定位，並將這個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 wate***ll()else);
//陣列 最小高元素的高 + 新增上的展示框[i]塊框高
harr[ minhindex ] += $boxs.eq( index).outerheight();//更新新增了塊框後的列高
}});
}

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

那麼現在我們就要通過後台傳來的json資料動態的生成新的展示框來提供新增了，因為每個專案所要展示的內容都不一樣，我在這裡就不展示具體的** 了，接下來就是要通過監聽滾動條的滑動來判斷什麼時候開始動態新增新展示框了。

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

//監聽滾動條
window.οnscrοll=function();
}//判斷是否需要繼續載入瀑布流
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
現在整個瀑布流的展示就完成了，今天在這裡記錄下來，留已備用。

前端頁面 瀑布流布局的實現

實現瀑布流布局

瀑布流布局

瀑布流布局

相關推薦

前端頁面瀑布流布局的實現