摘要:瀑布流簡介主要是運用對象和對象來實現(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)在頁面中。如下圖所示:
本章要介紹的是加載瀑布流的方法是,固定列數(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容器,設(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ù)值 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ù)中歷遍所有圖片將高度等于最小高度的圖片返回 要實現(xiàn)的效果是將第一排后的第一張圖片放在第一排中高度最小的那一列圖片下面,然后圖片與這一列相加,改變這一列的整體高度。再讓下一張圖片再去尋找第一排中高度最小的那一列圖片,將圖片放在這一列圖片下面,改變這一列圖片的高度,以此類推,將所有圖片都布局在頁面中。 用下面的方法來改變高度最小的列的高度,然后循環(huán)數(shù)組重新尋找高度最小的列 更多的內(nèi)容和瀑布流實際的動態(tài)效果可以訪問:http://www.hubwiz.com/course/55f7c75298b791ab0ca201d7/
聲明一個數(shù)組box_height_array[i]存放第一排所有圖片的高度
用for循環(huán)歷遍所有的圖片,用if(i
用JavaScript(DOM對象中的style屬性)設(shè)置圖片為絕對定位,和圖片距頂?shù)木嚯x和距左的距離
box_height_array[min_index] = box_height_array[min_index] + dcontent[i].offsetHeight;
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/111161.html
摘要:是規(guī)則的瀑布流。普通的尺寸會出現(xiàn)錯位的問題索引這個是右邊這個是左邊間距解決辦法,可以通過里的來判斷,這個方法不管你高度怎樣,他都是左右左右開始排列的。 目錄介紹 01.規(guī)則瀑布流實現(xiàn)02.不規(guī)則瀑布流實現(xiàn)2.1 實現(xiàn)方式2.2 遇到問題03.瀑布流上拉加載04.給瀑布流設(shè)置分割線05.自定義Manager崩潰06.如何避免刷新抖動07.為何有時出現(xiàn)跳動08.瀑布流圖片優(yōu)化09.onBi...
摘要:兩行如下分幾列不留白,不知道什么意思可以取消這個樣式試試列間距,可有可無,默認(rèn)效果圖如下說明不存在一邊列表過長問題,很均勻,沒有缺點抱歉有坑但可以一鏈代碼解決這個列表顯示順序是左邊右邊,不符合正常展示邏輯然后可以使用對數(shù)據(jù)進行預(yù)處 兩行css如下: .waterfall-container { /*分幾列*/ column-count: 2; } .w...
摘要:兩行如下分幾列不留白,不知道什么意思可以取消這個樣式試試列間距,可有可無,默認(rèn)效果圖如下說明不存在一邊列表過長問題,很均勻,沒有缺點抱歉有坑但可以一鏈代碼解決這個列表顯示順序是左邊右邊,不符合正常展示邏輯然后可以使用對數(shù)據(jù)進行預(yù)處 兩行css如下: .waterfall-container { /*分幾列*/ column-count: 2; } .w...
摘要:兩行如下分幾列不留白,不知道什么意思可以取消這個樣式試試列間距,可有可無,默認(rèn)效果圖如下說明不存在一邊列表過長問題,很均勻,沒有缺點抱歉有坑但可以一鏈代碼解決這個列表顯示順序是左邊右邊,不符合正常展示邏輯然后可以使用對數(shù)據(jù)進行預(yù)處 兩行css如下: .waterfall-container { /*分幾列*/ column-count: 2; } .w...
瀑布流的布局自我感覺還是很吸引人的,最近又看到實現(xiàn)瀑布流這個做法,在這里記錄下,特別的,感覺flex布局實現(xiàn)瀑布流還是有點懵的樣子,不過現(xiàn)在就可以明白它的原理了 1.multi-column多列布局實現(xiàn)瀑布流 先簡單的講下multi-column相關(guān)的部分屬性 column-count設(shè)置列數(shù) column-gap設(shè)置列與列之間的間距 column-width設(shè)置每列的寬度 還要結(jié)合在子容器中...
閱讀 923·2021-11-22 13:54
閱讀 2851·2021-09-28 09:36
閱讀 2989·2019-08-30 15:55
閱讀 1957·2019-08-30 15:44
閱讀 550·2019-08-29 12:31
閱讀 2568·2019-08-28 18:18
閱讀 1207·2019-08-26 13:58
閱讀 1393·2019-08-26 13:44