国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

一個簡單的瀑布流實現。

geekidentity / 2887人閱讀

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

瀑布流簡介

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

瀑布流實現方法

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

基本的操作步驟如下:

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

將準備的圖片都加加載到頁面中

為圖片添加css樣式

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

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

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

改別圖片高度并不斷的循環獲得高度最小的圖片

滾動條監聽事件

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

創建承載圖片的div容器

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

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

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

用img標簽來加載圖片

示意圖如下所示:

加載圖片

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

設置css樣式

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

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

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

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

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

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

獲取圖片

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

操作步驟詳解

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

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

再調用另一個函數 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是傳過來的兩個參數，

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

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

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

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

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

圖片布局

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

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

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


獲取最小高度圖片

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

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/

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86008.html

相關文章

  • RecyclerView瀑布流優化方案探討

    摘要：是規則的瀑布流。普通的尺寸會出現錯位的問題索引這個是右邊這個是左邊間距解決辦法，可以通過里的來判斷，這個方法不管你高度怎樣，他都是左右左右開始排列的。 目錄介紹 01.規則瀑布流實現02.不規則瀑布流實現2.1 實現方式2.2 遇到問題03.瀑布流上拉加載04.給瀑布流設置分割線05.自定義Manager崩潰06.如何避免刷新抖動07.為何有時出現跳動08.瀑布流圖片優化09.onBi...

    zhaofeihao 評論0 收藏0

  • 真的！！！兩行css代碼實現瀑布流，html,css最簡單的瀑布流實現方式且沒有缺點！

    摘要：兩行如下分幾列不留白，不知道什么意思可以取消這個樣式試試列間距，可有可無，默認效果圖如下說明不存在一邊列表過長問題，很均勻，沒有缺點抱歉有坑但可以一鏈代碼解決這個列表顯示順序是左邊右邊，不符合正常展示邏輯然后可以使用對數據進行預處 兩行css如下: .waterfall-container { /*分幾列*/ column-count: 2; } .w...

    TZLLOG 評論0 收藏0

  • 真的！！！兩行css代碼實現瀑布流，html,css最簡單的瀑布流實現方式且沒有缺點！

    摘要：兩行如下分幾列不留白，不知道什么意思可以取消這個樣式試試列間距，可有可無，默認效果圖如下說明不存在一邊列表過長問題，很均勻，沒有缺點抱歉有坑但可以一鏈代碼解決這個列表顯示順序是左邊右邊，不符合正常展示邏輯然后可以使用對數據進行預處 兩行css如下: .waterfall-container { /*分幾列*/ column-count: 2; } .w...

    wangjuntytl 評論0 收藏0

  • 真的！！！兩行css代碼實現瀑布流，html,css最簡單的瀑布流實現方式且沒有缺點！

    摘要：兩行如下分幾列不留白，不知道什么意思可以取消這個樣式試試列間距，可有可無，默認效果圖如下說明不存在一邊列表過長問題，很均勻，沒有缺點抱歉有坑但可以一鏈代碼解決這個列表顯示順序是左邊右邊，不符合正常展示邏輯然后可以使用對數據進行預處 兩行css如下: .waterfall-container { /*分幾列*/ column-count: 2; } .w...

    xiaokai 評論0 收藏0

  • 純css實現瀑布流（multi-column多列及flex布局）

    瀑布流的布局自我感覺還是很吸引人的，最近又看到實現瀑布流這個做法，在這里記錄下，特別的，感覺flex布局實現瀑布流還是有點懵的樣子，不過現在就可以明白它的原理了 1.multi-column多列布局實現瀑布流 先簡單的講下multi-column相關的部分屬性 column-count設置列數 column-gap設置列與列之間的間距 column-width設置每列的寬度 還要結合在子容器中...

    DC_er 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<