在一些購物類**上會看到一種諸如下圖的類似瀑布流布局，這種布局的乙個特點是每乙個盒子的寬度相同，而高度卻是任意的。
div>通過乙個div.pic-box盒子來控制每個元素之間的間隔，div.pic來給元素新增邊框效果。由於後面div.pic-box需要絕對定位，所以給它的父元素乙個position: relative;屬性。每個img的寬度設定為200px；
js指令碼的編寫主要有幾個思路：
1. 每一列排列的元素個數隨瀏覽器寬度改變而改變
2. 先將第一排元素排列好，然後後面的元素找前面高度最小的那一列插進去
注意：每次將元素插進去的時候需要更新每一列高度值得陣列
function
wate***ll
(parent,box)else
}}function
getindex
(arr,val)
}}這樣就實現了瀑布流的布局，如果還要實現往先滾動實時載入，還需要新增乙個滾動事件的監聽。
let data = [,,,,,];
//新增滾動監聽函式，自動載入
window.addeventlistener("scroll",function
(event)
}});
function
checkscroll
(parent,box)
JavaScript 實現瀑布流
一 前言 瀑布流現在是乙個非常常用的布局方式了，尤其在購物平台上，例如蘑菇街，等等。二 流程 1 在html檔案中寫出布局的元素內容 2 在css檔案中整體對每乙個必要的元素進行樣式和浮動設定 3 在js檔案中動態實現布局，每乙個滾動時，都要重新整理布局。三 思想 實現瀑布流，就是每次當前一列的顯示...
JavaScript 製作簡易瀑布流
en id container class box class box img div div class box class box img div div class box class box img div div class box class box img div div class ...
瀑布流實現
html 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 瀑布流效果 js 一定要用window.onload不能用 function var data window.onload function pbl pbl function pbl...