原生js寫瀑布流

2021-09-12 09:37:09 字數 578 閱讀 1188

準備用自學的jquery寫的,但是不熟悉api,忘得乾乾淨淨了,然後我覺得我直接用js寫比用jquery還要簡單一點

這是html布局

js**

/*1.獲取視口的寬度,獲取每個的寬度

* 2.遍歷迴圈每個

* 3.設定top和left

* top: 第一行設定為0,

* 第二行開始 最小高度

* left:i*imgw

*///必須等所有載入完才能編譯**

window.function()

function pubu()else

//每次設定乙個的top後都要更新陣列最低的高度

// 最小列的高度 = 當前自己的高度 + 拼接過來的高度 + 間隙的高度

heightarr[index]=heightarr[index]+items[i].offsetheight+gap;

} }

}

瀑布布局流 原生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響應式瀑布流

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