一個簡單的瀑布流實現(xiàn)。

geekidentity 發(fā)布于2019-08-21 10:41 / 2893人閱讀

摘要：瀑布流簡介主要是運用對象和對象來實現(xiàn)一個瀑布流，最終效果是在頁面中滾動鼠標(biāo)不斷地加載圖片永遠(yuǎn)劃不到頭，像百度圖片這樣的，在沒有設(shè)置分頁的的情況下，當(dāng)滾動滾動條的時候頁面從數(shù)據(jù)庫源源不斷的加載圖片呈現(xiàn)在頁面中。

瀑布流簡介

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

瀑布流實現(xiàn)方法

本章要介紹的是加載瀑布流的方法是，固定列數(shù)的浮動布局，根據(jù)你設(shè)備屏幕的寬度和加載圖片的寬度來固定列數(shù)，之后又獲取每一列圖片的高度，將要加載的圖片放在高度最小的那一列圖片下面，循環(huán)數(shù)組不斷的尋找高度最小的那一列圖片，將圖片放在下面實現(xiàn)基本的布局效果。然后再創(chuàng)建一個滾動條監(jiān)聽事件（當(dāng)最后一張圖片距頂?shù)母叨?屏幕的高度+滾動條滾動的距離）時，就觸發(fā)我們在頁面動態(tài)的添加圖片的事件（用JavasSript在Html DOM創(chuàng)建節(jié)點，并為其添加根元素）。

基本的操作步驟如下:

在Html頁面中創(chuàng)建承載圖片的div

將準(zhǔn)備的圖片都加加載到頁面中

為圖片添加css樣式

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

固定一排圖片的寬度并且居中對齊

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

改別圖片高度并不斷的循環(huán)獲得高度最小的圖片

滾動條監(jiān)聽事件

創(chuàng)建Json字符出模擬數(shù)據(jù)
10. 動態(tài)的創(chuàng)建節(jié)點并為其添加根元素
11. 調(diào)整動態(tài)圖片的格式

創(chuàng)建承載圖片的div容器

首先創(chuàng)建一個能夠承載所有圖片的div容器，設(shè)置id="container"

創(chuàng)建一個能夠承載單個圖片的div容器，設(shè)置class="box"

創(chuàng)建一個div容器來設(shè)置圖片的邊框效果，使樣式更加美觀，設(shè)置class="box_img"

用img標(biāo)簽來加載圖片

示意圖如下所示:

加載圖片

在這里我準(zhǔn)備的是一些關(guān)于宮崎駿動畫的圖片作為實現(xiàn)瀑布流的素材，首先在 id="container"的div容器中加載圖片，復(fù)制id="box"承載單個圖片的div容器，以及他的子元素id="box_img"邊框div容器，和標(biāo)簽，并且分別修改圖片的名稱，將準(zhǔn)備的所有圖片都加載進來，如果你需要引用代碼，就修改一下相關(guān)的圖片路徑。

設(shè)置css樣式

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

首先用通配符"*"來設(shè)置頁面中所有Html標(biāo)簽的所有內(nèi)邊距padding:0px和外邊距margin:0px,選用通配符是因為它的優(yōu)先級比所有其他選擇器都要低（id選擇器>類選擇器>Html選擇器>通配符選擇器）

設(shè)置id="container"相對定位，

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

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

設(shè)置圖片的寬度width:150和高度height:auto自適應(yīng)

獲取圖片

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

操作步驟詳解

先通過函數(shù)img_location("container","box");來獲取所有的圖片，并且傳入?yún)?shù)container和box。

在函數(shù)中用document.getElementById("");`獲container所對應(yīng)的div元素。

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

固定寬度和居中對齊

前一節(jié)已經(jīng)獲取了圖片，本節(jié)通過調(diào)用一個函數(shù)get_width(dparent, dcontent)來固定列數(shù)，其中dparent和dcontent是傳過來的兩個參數(shù)，

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

用 win_width = document.documentElement.clientWidth;獲取當(dāng)前設(shè)備的寬度

用Math.floor(設(shè)備的寬度/圖片寬度)函數(shù)將結(jié)果轉(zhuǎn)化為整數(shù),即圖片的列數(shù)

設(shè)置第一排圖片的寬度=這個整數(shù)*圖片寬度，即固定列數(shù)

用JavaScript(DOM中的style)設(shè)置圖片居中對齊

圖片布局

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

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

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

獲取最小高度圖片

調(diào)用函數(shù)min_image_locatin(dec_width,dcontent)其中參數(shù) dec_width是在上一節(jié)中，將返回的列數(shù)值
聲明一個數(shù)組box_height_array[i]存放第一排所有圖片的高度
用for循環(huán)歷遍所有的圖片，用if（i

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

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

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

圖片布局

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

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

更多的內(nèi)容和瀑布流實際的動態(tài)效果可以訪問：http://www.hubwiz.com/course/55f7c75298b791ab0ca201d7/