一個(gè)簡(jiǎn)單的瀑布流實(shí)現(xiàn)。

lscho 發(fā)布于2019-08-01 14:50 / 1057人閱讀

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

瀑布流簡(jiǎn)介

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

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

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

基本的操作步驟如下:

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

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

為圖片添加css樣式

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

固定一排圖片的寬度并且居中對(duì)齊

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

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

滾動(dòng)條監(jiān)聽(tīng)事件

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

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

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

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

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

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

示意圖如下所示:

加載圖片

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

設(shè)置css樣式

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

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

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

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

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

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

獲取圖片

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

操作步驟詳解

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

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

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

固定寬度和居中對(duì)齊

前一節(jié)已經(jīng)獲取了圖片，本節(jié)通過(guò)調(diào)用一個(gè)函數(shù)get_width(dparent, dcontent)來(lái)固定列數(shù)，其中dparent和dcontent是傳過(guò)來(lái)的兩個(gè)參數(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è)置第一排圖片的寬度=這個(gè)整數(shù)*圖片寬度，即固定列數(shù)

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

圖片布局

就獲得的圖片布局的效果來(lái)看，并不是我們所想要的圖片布局，因?yàn)樗恳慌诺母叨仁怯芍慌胖懈叨茸罡叩膱D片所決定，在圖片高度小的區(qū)域就會(huì)出現(xiàn)大量的空白。

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

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

獲取最小高度圖片

調(diào)用函數(shù)min_image_locatin(dec_width,dcontent)其中參數(shù) dec_width是在上一節(jié)中，將返回的列數(shù)值
聲明一個(gè)數(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)用一個(gè)函數(shù)get_min_height(box_height_array, min_height)獲取高度最小圖片的位置，在函數(shù)中歷遍所有圖片將高度等于最小高度的圖片返回
用JavaScript(DOM對(duì)象中的style屬性)設(shè)置圖片為絕對(duì)定位，和圖片距頂?shù)木嚯x和距左的距離

圖片布局

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

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

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