溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關在html5中怎么實現圖片的瀑布流布局的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
首先大家在網上搜索一些圖片或者用一下自己喜歡的圖片均可，用html搭建好框架網頁的框架將圖片存放好，我們這里使用的了20張圖為例。其次使用html+css實現一個簡單的布局，這有個關鍵的步驟：我們對比上面百度和淘寶頁面的瀑布流布局就不難發現，要實現瀑布流所有圖片都得有個相同的高度或者高度。因此我們這就給所用照片設置一個固定的寬度，但不限定的圖片的高度保證每圖片都按其原始比例完整展示出來。
HTML，CSS代碼如下：
css代碼
*{
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代碼：
<!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>我們給每個盒子都使用了一個float：left屬性，讓圖片脫離文檔來到網頁的最上端，但是圖片過多時有部分圖片被擠到了第二行，可是他們并沒有像我們設想的那樣像瀑布式的排列，那我們該怎么實現呢，這時我們的的JS就要派上用場啦。
通過js實現將第一行后的圖片排列在緊湊的排列在每一列中
代碼如下代碼（附帶有詳細注釋）：
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 絕對定位擺放，完成后更新每列列高，直至圖片擺放完成。
感謝各位的閱讀！關于“在html5中怎么實現圖片的瀑布流布局”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
