一個簡單的瀑布流實現。

本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，博客地址為http://www.cnblogs.com/jasonnode/ 。

瀑布流簡介

主要是運用Html+CSS+JavaScript（DOM對象和window對象）來實現一個瀑布流，最終效果是在頁面中滾動鼠標不斷地加載圖片永遠划不到頭，像百度圖片這樣的，在沒有設置分頁的的情況下，當滾動滾動條的時候頁面從數據庫源源不斷的加載圖片呈現在頁面中。如下圖所示:

瀑布流實現方法

本章要介紹的是加載瀑布流的方法是，固定列數的浮動布局，根據你設備屏幕的寬度和加載圖片的寬度來固定列數，之后又獲取每一列圖片的高度，將要加載的圖片放在高度最小的那一列圖片下面，循環數組不斷的尋找高度最小的那一列圖片，將圖片放在下面實現基本的布局效果。然后再創建一個滾動條監聽事件（當最后一張圖片距頂的高度<屏幕的高度+滾動條滾動的距離）時，就觸發我們在頁面動態的添加圖片的事件（用JavasSript在Html DOM創建節點，並為其添加根元素）。

基本的操作步驟如下:

1. 在Html頁面中創建承載圖片的div

2. 將准備的圖片都加加載到頁面中

3. 為圖片添加css樣式

4. 獲取第一排每一列圖片的高度

5. 固定一排圖片的寬度並且居中對齊

6. 將圖片放在第一排高度最小的列下面

7. 改別圖片高度並不斷的循環獲得高度最小的圖片

8. 滾動條監聽事件

9. 創建Json字符出模擬數據
   10. 動態的創建節點並為其添加根元素
   11. 調整動態圖片的格式

創建承載圖片的div容器

1. 首先創建一個能夠承載所有圖片的div容器，設置id="container"

2. 創建一個能夠承載單個圖片的div容器，設置class="box"

3. 創建一個div容器來設置圖片的邊框效果，使樣式更加美觀，設置class="box_img"

4. 用img標簽來加載圖片

示意圖如下所示:

加載圖片

在這里我准備的是一些關於宮崎駿動畫的圖片作為實現瀑布流的素材，首先在 id="container"的div容器中加載圖片，復制id="box"承載單個圖片的div容器，以及他的子元素id="box_img"邊框div容器，和<img>標簽，並且分別修改圖片的名稱，將准備的所有圖片都加載進來，如果你需要引用代碼，就修改一下相關的圖片路徑。

設置css樣式

上一講加載進來的圖片是在左邊排成一列，這一講用css來設置他的布局和樣式

1. 首先用通配符"*"來設置頁面中所有Html標簽的所有內邊距padding:0px和外邊距margin:0px,選用通配符是因為它的優先級比所有其他選擇器都要低（id選擇器>類選擇器>Html選擇器>通配符選擇器）

2. 設置id="container"相對定位，

3. 設置id="box"的div容器外邊距padding:5px，可以得到兩種圖片間的距離為10px,設置浮動float:left為向左浮動，讓它一次布局排開

4. 設置id="box_img"外邊距padding和邊框border和陰影box-shadow圓角border-radius的效果，

5. 設置圖片的寬度width:150和高度height:auto自適應

獲取圖片

使用float布局有個缺點，當瀏覽器窗口的大小改變時，在頁面中的圖片會適應窗口來重新排列布局會帶來一些不必要的麻煩，而這種效果應該使用響應式布局來實現。從本節課開始就是用JavaScript布局和改變Html中的一些樣式和布局。本節操作是使用JavaScript的window對象來獲取設備窗口的寬度和圖的寬度，最終獲得擺放圖片的列數，但是在此之前要先獲得所有的圖片。

操作步驟詳解

1. 先通過函數img_location("container","box");來獲取所有的圖片，並且傳入參數container和box。

2. 在函數中用document.getElementById("");`獲container所對應的div元素。

3. 再調用另一個函數 get_child_element("",""),來獲取所有的box所對應的div元素。在函數中首先定義一個數組content_array =[]，通過container.getElementsByTagName("*")獲取container對應div的所有子元素，並儲存到數組all_content[]中，此時歷遍all_content[]數組用all_content[i].className == box做一個判斷,將className == box的放入數組content_array = []中並返回content_array = []數組。

固定寬度和居中對齊

前一節已經獲取了圖片，本節通過調用一個函數get_width(dparent, dcontent)來固定列數，其中dparent和dcontent是傳過來的兩個參數，

1. 在函數中先用img_width = dcontent[1].offsetWidth;獲得圖片的寬度,

2. 用 win_width = document.documentElement.clientWidth;獲取當前設備的寬度

3. 用Math.floor(設備的寬度/圖片寬度)函數將結果轉化為整數,即圖片的列數

4. 設置第一排圖片的寬度=這個整數*圖片寬度，即固定列數

5. 用JavaScript(DOM中的style)設置圖片居中對齊

圖片布局

就獲得的圖片布局的效果來看，並不是我們所想要的圖片布局，因為它每一排的高度是由着一排中高度最高的圖片所決定，在圖片高度小的區域就會出現大量的空白。

而我們要實現的效果是，第一排后的第一張圖片放在第一排中高度最小的那一列圖片下面，然后圖片與這一列相加，改變這一列的整體高度。再讓下一張圖片再去尋找第一排中高度最小的那一列圖片，將圖片放在這一列圖片下面，改變這一列圖片的高度，以此類推，將所有圖片都布局在頁面中。

在實現最終效果之前，要先獲取第一排所有圖片的高度，和其中高度度最小的圖片，並將第一排以后的所有圖片都放在高度最小的圖片后面。

獲取最小高度圖片

調用函數min_image_locatin(dec_width,dcontent)其中參數 dec_width是在上一節中，將返回的列數值
聲明一個數組box_height_array[i]存放第一排所有圖片的高度
用for循環歷遍所有的圖片，用if（i<dec_width)做一個判斷，獲取第一排所有圖片的高度

box_height_array[i] = dcontent[i].offsetHeight; //取得第一排圖片的高度

用函數Math.min.apply(null, box_height_array)獲取第一排圖片中高度最小的圖片

調用一個函數get_min_height(box_height_array, min_height)獲取高度最小圖片的位置，在函數中歷遍所有圖片將高度等於最小高度的圖片返回
用JavaScript(DOM對象中的style屬性)設置圖片為絕對定位，和圖片距頂的距離和距左的距離

圖片布局

要實現的效果是將第一排后的第一張圖片放在第一排中高度最小的那一列圖片下面，然后圖片與這一列相加，改變這一列的整體高度。再讓下一張圖片再去尋找第一排中高度最小的那一列圖片，將圖片放在這一列圖片下面，改變這一列圖片的高度，以此類推，將所有圖片都布局在頁面中。

用下面的方法來改變高度最小的列的高度，然后循環數組重新尋找高度最小的列 
box_height_array[min_index] = box_height_array[min_index] + dcontent[i].offsetHeight;

來看看動態效果的實現嗎？