前言：
瀑布流 又稱瀑布流式布局，是比較流行的一種網站頁面布局方式。即多行等寬元素排列，后面的元素依次添加到其后，等寬不等高，根據圖片原比例縮放直至寬度達到我們的要求，依次按照規則放入指定位置。
什么是瀑布流布局：
先看效果：
- 圖片多行等寬元素排列，后面的元素依次添加到其后，等寬不等高，根據圖片原比例縮放直至寬度達到我們的要求，依次按照規則放入指定位置。
- 為了方便理解，在此先給上html、css代碼
不完整html代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<div id="container"> <div class="box"> <div class="box-img"> <img src="./img/1.jpg" alt=""> </div> </div> <div class="box"> <div class="box-img"> <img src="./img/2.jpg" alt=""> </div> </div> <div class="box"> <div class="box-img"> <img src="./img/3.jpg" alt=""> </div> </div> </div> ......<!-- 省略了圖片，多少張圖片自行決定--> |
完整的css代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
*{ padding: 0; margin: 0; } #container{ position: relative; } .box{ float: left; padding: 15px; } .box-img { width: 150px; padding: 5px; border: 1px solid #ccc ; box-shadow: 0 0 5px #ccc; border-radius: 5px; } .box-img img{ width: 100%; height: auto; } |
如何實現：
簡單地來說，如果要實現瀑布流布局，得完成這幾件事?
1. 獲取圖片
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
function getChildElemnt() { const contentArr = []//定義數組準備裝圖 const parent = document.getElementById(container)//得到整個頁面 const allContent = parent.getElementsByTagName('*')//得到整個標簽 console.log(allContent); for (var i = 0; i < allContent.length; i++) { if (allContent[i].className == 'box') { contentArr.push(allContent[i])//將class='box'的標簽裝入數組 } } console.log(contentArr); return contentArr//返回數組 } |
2. 設置圖片寬帶
|
1
2
|
var ccontent = getChildElemnt() var imgWidth = ccontent[0].offsetWidth//令所有圖片寬度等于第一張圖片 |
3. 計算瀏覽器頁面一行最多能存放圖片的數量
|
1
2
3
|
var dWidth=document.documentElement.clientWidth//頁面寬度var num = Math.floor(dWidth/ imgWidth)//Math.floor()向下取整 |
4. 比較圖片高度
因為在瀑布流布局中，當第一行圖片已經擺滿后，第二行的第一張圖片要放在第一行中高度最小的圖片的下面
|
1
2
3
4
5
6
7
8
9
|
var BoxHeightArr = []//定義一個數組，把每張圖片的高度依次放進去 for (var i = 0; i < ccontent.length; i++) { if (i < num) { BoxHeightArr[i] = ccontent[i].offsetHeight//將圖片的高度存入數組 } else {//當第一行已經存放不了圖片后 var minHeight = Math.min.apply(null, BoxHeightArr)//比較出上一行最小的高度 } } |
5. 得到上一行中最小高度圖片的位置
|
1
2
3
4
5
6
7
8
|
//定義一個getMinHeightLocation函數，給它傳入BoxHeightArr上一行全部圖片，和minHeight上一行圖片的最小高度 function getMinHeightLocation(BoxHeightArr, minHeight) { for (var i in BoxHeightArr) { if (BoxHeightArr[i] === minHeight) {//當圖片高度等于最小高度時，該圖片的位置為最小高度圖片的位置 return i } } } |
6. 插圖
|
1
2
3
4
5
6
7
8
9
10
11
12
|
for (var i = 0; i < ccontent.length; i++) { if (i < num) { BoxHeightArr[i] = ccontent[i].offsetHeight } else { var minHeight = Math.min.apply(null, BoxHeightArr) var minIndex = getMinHeightLocation(BoxHeightArr, minHeight) ccontent[i].style.position = 'absolute'//將要插入的圖片絕對定位，即元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定 ccontent[i].style.top = minHeight + 'px'//令插入的圖片到頂端的距離剛好等于要插其下面圖片的高度 ccontent[i].style.left = ccontent[minIndex].offsetLeft + 'px'//令插入的圖片到最左邊的距離剛好等于要插其下面圖片到最左邊的距離 BoxHeightArr[minIndex] = BoxHeightArr[minIndex] + ccontent[i].offsetHeight//插入圖片后，得將這位置的高度設為兩張圖片的高度和 }} |
完整代碼如下：
優化代碼，提高性能
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
window.onload = function() { imgLocation('container', 'box')//構造函數imgLocation}//用window.onload = function() {}函數就不用等著body頁面中調用就可以執行了// 獲取到當前有多少張圖片要擺放function imgLocation(parent, content) {//令parent='container'，content='box' // 將parent下所有的內容全部取出 var cparent = document.getElementById(parent) var ccontent = getChildElemnt(cparent, content) var imgWidth = ccontent[0].offsetWidth var num = Math.floor(document.documentElement.clientWidth / imgWidth) cparent.style.cssText = `width: ${imgWidth * num} px` var BoxHeightArr = [] for (var i = 0; i < ccontent.length; i++) { if (i < num) { BoxHeightArr[i] = ccontent[i].offsetHeight } else { var minHeight = Math.min.apply(null, BoxHeightArr) var minIndex = getMinHeightLocation(BoxHeightArr, minHeight) ccontent[i].style.position = 'absolute' ccontent[i].style.top = minHeight + 'px' ccontent[i].style.left = ccontent[minIndex].offsetLeft + 'px' BoxHeightArr[minIndex] = BoxHeightArr[minIndex] + ccontent[i].offsetHeight } } // console.log(BoxHeightArr);}function getChildElemnt(parent, content) {parent='container'，content='box' const contentArr = [] const allContent = parent.getElementsByTagName('*') console.log(allContent); for (var i = 0; i < allContent.length; i++) { if (allContent[i].className == content) { contentArr.push(allContent[i]) } } console.log(contentArr); return contentArr}function getMinHeightLocation(BoxHeightArr, minHeight) { for (var i in BoxHeightArr) { if (BoxHeightArr[i] === minHeight) { return i } }} |
以上就是如何用JS實現網頁瀑布流布局的詳細內容，更多關于JS實現網頁瀑布流布局的資料請關注服務器之家其它相關文章！
原文鏈接：https://juejin.cn/post/6952404632610013215
