通過原生JS實現瀑布流布局

由於工作需要，花了幾天時間研究瀑布流布局。該布局可以使用原生js、jquery、以及css3來實現，目前的工作場景不允許使用css3（主要是ie），所以本文主要針對原生js。

一、需要掌握的知識點

document.body 與 document.documentelement的相容性

var html = document.documentelement;

console.
log(html == document.firstchild)
;// true
console.
log(html == document.childnodes[0]
);// true

三、具體解決方法

頁尾div

>

body

>

#main

.box

.pic

.pic img

.footer

window.

onload
=function()

// getclassbox函式用於獲取所有元素

function
getclassbox
(parent, element)
}return arrbox;
}

function

wate***ll
(parent, element)
else
}}

// 索引號

function
getminhindex
(arr, val)
}}

oparent.style.height =

getpageheight()
+"px"
;// 獲取高度
// 當頁面滾動到設定位置後開始載入剩餘

function
checkscrollslide()
else
}
//資料

var data =[,
,,,]
;//滾動條事件
window.
onscroll
=function()
wate***ll
(oparent,
"box");
// 再呼叫一次wate***ll，讓後續載入的應用其方法
} oparent.style.height =
getpageheight()
+"px"
;}
最後需要注意三個部分：
 
原生JS實現瀑布流布局
一.瀑布流之準備工作 首先宣告下,為了方便演示和聯絡,我使用的是本地,如果大家有需要的話可以嘗試著寫下網路的,不過本地和遠端的大致是相同的.那麼我就來簡單介紹下本地的瀑布流效果吧,我們要先準備好 張,當然啦,我們實現的是瀑布流效果,所以最好是高度不相同的,這樣才可以看出來效果,對吧,嘿嘿.二.的準備...
原生JS瀑布流布局賞析
本效果的思想 於以下這邊文章 瀑布流布局主要分為兩部分 1 資料塊排列，演算法步驟簡述下 初始化時，對容器中已有資料塊元素進行第一次計算，需要使用者給定 a，容器元素 以此獲取容器總寬度 b，列寬度 最終列數取的是容器寬度 列寬度 獲得列數後，需要儲存每個列的當前高度，這樣在新增每個資料塊時，才知道...
js實現瀑布流布局
1.瀑布流的布局，要求布局的元素是等寬的，瀑布流布局的特點就是等寬不等高，然後計算元素的寬度和瀏覽器螢幕寬度的比值，確定出列數 2.建立乙個陣列，這個陣列用於儲存第一行的各個高度 3.計算出這個陣列中最小的元素，接下來的通過定位的方式布局到高度最小的下面，4.最後將這個最小高度進行更新，然後一直迴圈...