當前位置：首頁 > 網頁制作 > HTML/Xhtml > 詳細頁面

HTML+CSS+JS實現圖片的瀑布流布局的示例代碼

時間：2021-04-22來源：www.farandoo.com作者：電腦系統城

前言

瀑布流布局簡而言之就是類似瀑布流的布局嘛，這么一講大家可能還是不是了解的很明白，來來來，那現在我給大家上一個常見的實例:

在這里插入圖相信大家在百度上搜索圖片時的時候，網頁圖片的布局就是這樣子的吧，什么？你還是不清楚瀑布流，那咱就再我看一個那沒關系，淘寶大家應該再熟悉不過了吧片描述

相信大家在百度上搜索圖片時的時候，網頁圖片的布局就是這樣子的吧，什么？你還是不清楚瀑布流，那咱就再我看一個那沒關系，淘寶大家應該再熟悉不過了吧!

在這里插入圖片描述

我們可以發現圖中每個商品框的高度不同的，因此導致我們的商品圖片的高度布局都不在一個高度上。在百度搜索圖片的時候我們發現每張圖片的寬度都是不一樣的那為什么所用圖片的寬度它能剛剛好的占滿一行呢?

這就是我今天今天教大家的布局方式——waterfall 布局，那該怎么實現呢？那我們就不多說啦，直接上干貨!

一、總體效果

瀑布流的搭建完的效果如下：

在這里插入圖片描述

二、HTML+CSS簡單布局

首先大家在網上搜索一些圖片或者用一下自己喜歡的圖片均可，用html搭建好框架網頁的框架將圖片存放好，我們這里使用的了20張圖為例。其次使用html+css實現一個簡單的布局，這有個關鍵的步驟：我們對比上面百度和淘寶頁面的瀑布流布局就不難發現，要實現瀑布流所有圖片都得有個相同的高度或者高度。因此我們這就給所用照片設置一個固定的寬度，但不限定的圖片的高度保證每圖片都按其原始比例完整展示出來。

HTML，CSS代碼如下：

css代碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22 *{
margin: 0;
padding: 0;
}
#container{
position: relative;
}
.box{
float: left;/* 給每個存放照片box設置為浮動元素，讓所有的圖片浮動到網頁的第一行*/
padding: 5px;
}
.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;
}

html代碼

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js 瀑布流</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<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 class="box">
<div class="box-img">
<img src="./img/4.jpg" alt="">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="./img/5.jpg" alt="">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="./img/6.jpg" alt="">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="./img/7.jpg" alt="">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="./img/8.jpg" alt="">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="./img/9.jpg" alt="">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="./img/10.jpg" alt="">
</div>
</div>
<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 class="box">
<div class="box-img">
<img src="./img/4.jpg" alt="">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="./img/5.jpg" alt="">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="./img/6.jpg" alt="">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="./img/7.jpg" alt="">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="./img/8.jpg" alt="">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="./img/9.jpg" alt="">
</div>
</div>
<div class="box">
<div class="box-img">
<img src="./img/10.jpg" alt="">
</div>
</div>
</div>
<script src="./index.js"></script>
</body>
</html>

html和css修飾后的網頁的效果是怎樣的的呢？

在這里插入圖片描述

我們給每個盒子都使用了一個float：left屬性，讓圖片脫離文檔來到網頁的最上端，但是圖片過多時有部分圖片被擠到了第二行，可是他們并沒有像我們設想的那樣像瀑布式的排列，那我們該怎么實現呢，這時我們的的JS就要派上用場啦。

三、JS實現后續布局

通過js實現將第一行后的圖片排列在緊湊的排列在每一列中

代碼如下代碼（附帶有詳細注釋）：

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
52
53
54
55
56 window.onload = function() {
imgLocation('container', 'box')
}

// 獲取到當前有多少張圖片要擺放
function imgLocation(parent, content) {
// 將containerd下所有的內容全部取出
var cparent = document.getElementById(parent) //獲取container盒子的標簽
var ccontent = getChildElemnt(cparent, content)//圖片時放在container盒子里的box盒子里的，因此我們還需要定義一個函數getChildElemnt（）獲取出box里的圖片

var imgWidth = ccontent[0].offsetWidth//獲取css中我們給每張圖片設置的固定寬度
var num = Math.floor(document.documentElement.clientWidth / imgWidth) //獲取瀏覽器body的寬度計算最多能放幾張我們的圖片
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 //這里我們通過BoxHeightArr[]數組存放每列的高度
} else { //剩下的圖片我們依次次優先選擇擺在高度最低的一列后面
var minHeight = Math.min.apply(null, BoxHeightArr) //通過將Math.min()中求最小值的方法應用到數組中，求出高度最低的列
var minIndex = getMinHeightLocation(BoxHeightArr, minHeight) //確定了高度最低的列后我們就差求出列的位置了,我們通過編寫一個函數實現

//最后將我們的圖片相對于container盒子進行定位放在每一列下就可以啦
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) {
const contentArr = []
const allContent = parent.getElementsByTagName('*')//通過內置函數getElementsByTagName()將container中的所有元素取出來
// console.log(allContent);
for (var i = 0; i < allContent.length; i++) {//但是container中所有的元素中我們只需要的是所有的img，為此我們寫個for循環將所用img篩選出來存放在一個數組中
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算法思路及操作：

將所有的需要排列的圖像獲取出來
因為圖片時放在container盒子里的box盒子里的，因此我們定義了一個函數getChildElemnt（）獲取出box的里的圖片，在這個函數中通過內置函數getElementsByTagName()將container中的所有元素取出來，但是container中所有的元素中我們只需要的是所有的img，為此我們寫個for循環將所用img篩選出來存放在一個我們定義的content[]數組中。
提取到所有圖片后我們就要需要確定圖片排列的位置，我們先將在第一行排滿，剩下的圖排列時依次排在在高度最小的列后面，為此我們在排列每張圖片的時候都需要求出高度最小列以及確定其位置

通過 ccontent[0].offsetWidth （每一張圖片的寬度都是一樣的，因此取數組中任意元素均可）獲取css中我們給每張圖片設置的固定寬度，其次利用 document.documentElement.clientWidth 獲取當前網頁比例下瀏覽器的寬度，求出一行最多能整存多少張圖片（即多少列）,再使用for循環擺放圖片，先將第一行擺滿，創建BoxHeightArr[]數組存放每列的高度，將Math.min() 方法應用于 BoxHeightArr[]數組中，求出高度最低的列，創建 getMinHeightLocatio()函數獲取列高度最小列的位置下標，與container div 絕對定位擺放，完成后更新每列列高，直至圖片擺放完成。

相關信息

2021-04-22
巧用 -webkit-box-reflect 倒影實現各類動效(小結)
2020-03-04
HTML5 video自定義視頻播放器
2020-03-04
HTML5之audio屬性

HTML連載72-動畫效果及其他屬性
一、動畫效果 1.過渡與動畫相類似，都需要三要素，那么他們的區別在哪里呢？ ?答：過渡必須是人為的觸發才會執行動畫，動畫不需要人為的觸發就可以自動執行?動畫。 2.?相同點：（1）過度和動畫都是用來給元素添加動畫的；（2）過渡...

2020-03-04
徹底搞懂flex彈性盒模型布局
為什么要用flex 基于css3簡單方便，更優雅的實現，瀏覽器兼容性好，傳統的css實現一個div居中布局要寫一堆代碼，而現在幾行代碼就搞定了，沒有理由不用flex。...

2020-02-28

熱門系統總排行

裝機必備

系統教程欄目

欄目熱門教程

人氣教程排行

站長推薦

熱門系統下載

jlzzjlzz亚洲乱熟在线播放