一個簡單的瀑布流實現。

瀑布流簡介

主要是運用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;

更多的內容和瀑布流實際的動態效果能夠訪問：http://www.hubwiz.com/course/55f7c75298b791ab0ca201d7/