如何產生響應式列
動態獲取視窗的尺寸
獲取到列的固定寬度
響應式列數=動態獲取視窗的尺寸/獲取到列的固定寬度
如何獲取響應式列的最小高度？
把產生的列容器放在乙個陣列裡面
這個陣列使用sort()方法進行公升序排列
產生的新陣列的第一位就是高度最小的列
>
>
charset
="utf-8"
>
>
title
>
>
.cols
.image
section
style
>
head
>
>
>
section
>
body
>
html
>
var allarr=
;//這個陣列用來存放列
var wrap=document.
queryselector
("section");
//獲取到包含列的容器
//第一步：創造多少列，並且根據視窗的大小自動調整列數
function
getcols()
//使瀑布流一直居中
wrap.style.width=cols*
170+
"px";}
function
getmin()
)return arr[0]
;}function
createele
(num)
}function
rnd(a,b)
getcols()
;createele(8
) window.
onresize
=function()
<
/script>
瀑布布局流 原生js
首先html和css 然後單單左浮動是不會 插空 插入的，這裡就是我們的重點啦。首先 都是要絕對定位的。確定好乙個頁面有多少列，每插入一張就計算每一列的高度，取最短的那列插入，計算該插入的top和left再賦值，絕對定位定在那裡，就ok啦 function wate ll parent,pin el...
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 必須等所...