瀑布流實現原理（ jQuery 實現 ）

1.什麼是瀑布流、

為什麼要使用瀑布流：由於尺寸的大小不同，我們為了用最合適的比例來展示，就需要讓自己去確定最終的高度。但是自定義高度會使得每一項的高度不一致而使頁面顯得混亂，故我們可以使用瀑布流來確定元素的定位位置。

瀑布流的定義：元素自判斷顯示區域中，那一列的高度最低，則在那一列顯示。

2.瀑布流具體原理

（1）. 根據資料庫資料建立每乙個卡片

)（2）. 對每乙個卡片進行布局

// 由於**執行順序問題，剛剛建立完的節點還未載入 img 

// 如果直接設定布局，達不到想要的效果
window.
onload
=function()
// 【二.遍歷每項】$(
'.item').
each
((index, model)
=>
)// 2.3- 更新該新增列的高度值
arrheight[minindex]
= minheight + gap +
$(model)
.outerheight()
;});
}

lang
="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
documenttitle
>
rel=
"stylesheet"
href
="./css/init.css"
>
head
>
>
class
="box"
>
div>
body
>
 
瀑布流實現
html 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 js 一定要用window.onload不能用 function var data window.onload function pbl pbl function pbl...
瀑布流簡單實現
使用scrollview簡單實現瀑布流 實現 waterflowview.h import typedefenumwaterfiowviewmargintype class waterflowviewcell,waterfiowview 資料來源方法 protocol waterflowviewda...
JavaScript 實現瀑布流
一 前言 瀑布流現在是乙個非常常用的布局方式了，尤其在購物平台上，例如蘑菇街，等等。二 流程 1 在html檔案中寫出布局的元素內容 2 在css檔案中整體對每乙個必要的元素進行樣式和浮動設定 3 在js檔案中動態實現布局，每乙個滾動時，都要重新整理布局。三 思想 實現瀑布流，就是每次當前一列的顯示...