瀑布布局流 原生js

首先html和css

然後單單左浮動是不會「插空」插入的，這裡就是我們的重點啦。首先**都是要絕對定位的。確定好乙個頁面有多少列，每插入一張就計算每一列的高度，取最短的那列插入，計算該插入的top和left再賦值，絕對定位定在那裡，就ok啦~

function

wate***ll
(parent,pin)else
}}function
getminhindex
(arr,minh)
}}

function

checkscrollside
()var dataint=,,,]};
window.onscroll=function
()            wate***ll('main','pin');
};}

效果圖

js原生實現瀑布流

1.確定瀏覽器顯示區域內，一行放多少列盒子 寬度一致，高度由內容撐開 1.1 獲取頁面寬度 1.2 獲取盒子寬度 1.3 顯示的列數 頁面寬度 盒子寬度 2.確定列數之後，先排列第一行 2.1 顯示的列數 頁面寬度 盒子寬度 間隙 2.2for迴圈裡判斷 當i 盒子的索引 小於column 列數 的...

原生js寫瀑布流

準備用自學的jquery寫的，但是不熟悉api，忘得乾乾淨淨了，然後我覺得我直接用js寫比用jquery還要簡單一點 這是html布局 js 1.獲取視口的寬度，獲取每個的寬度 2.遍歷迴圈每個 3.設定top和left top 第一行設定為0,第二行開始 最小高度 left i imgw 必須等所...

原生JS響應式瀑布流

如何產生響應式列 動態獲取視窗的尺寸 獲取到列的固定寬度 響應式列數 動態獲取視窗的尺寸 獲取到列的固定寬度 如何獲取響應式列的最小高度？把產生的列容器放在乙個陣列裡面 這個陣列使用sort 方法進行公升序排列 產生的新陣列的第一位就是高度最小的列 charset utf 8 title cols ...