前言
瀑布流布局簡而言之就是類似瀑布流的布局嘛，這么一講大家可能還是不是了解的很明白，來來來，那現(xiàn)在我給大家上一個常見的實例:
相信大家在百度上搜索圖片時的時候，網(wǎng)頁圖片的布局就是這樣子的吧，什么？你還是不清楚瀑布流，那咱就再我看一個那沒關(guān)系，淘寶大家應(yīng)該再熟悉不過了吧!
我們可以發(fā)現(xiàn)圖中每個商品框的高度不同的，因此導致我們的商品圖片的高度布局都不在一個高度上。在百度搜索圖片的時候我們發(fā)現(xiàn)每張圖片的寬度都是不一樣的那為什么所用圖片的寬度它能剛剛好的占滿一行呢?
這就是我今天今天教大家的布局方式——waterfall 布局，那該怎么實現(xiàn)呢？那我們就不多說啦，直接上干貨!
一、總體效果
瀑布流的搭建完的效果如下：
二、HTML+CSS簡單布局
首先大家在網(wǎng)上搜索一些圖片或者用一下自己喜歡的圖片均可，用html搭建好框架網(wǎng)頁的框架將圖片存放好，我們這里使用的了20張圖為例。其次使用html+css實現(xiàn)一個簡單的布局，這有個關(guān)鍵的步驟：我們對比上面百度和淘寶頁面的瀑布流布局就不難發(fā)現(xiàn)，要實現(xiàn)瀑布流所有圖片都得有個相同的高度或者高度。因此我們這就給所用照片設(shè)置一個固定的寬度，但不限定的圖片的高度保證每圖片都按其原始比例完整展示出來。
HTML，CSS代碼如下：
css代碼
*{
margin: 0;
padding: 0;
}
#container{
position: relative;
}
.box{
float: left;/* 給每個存放照片box設(shè)置為浮動元素，讓所有的圖片浮動到網(wǎng)頁的第一行*/
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>
html和css修飾后的網(wǎng)頁的效果是怎樣的的呢？
我們給每個盒子都使用了一個float：left屬性，讓圖片脫離文檔來到網(wǎng)頁的最上端，但是圖片過多時有部分圖片被擠到了第二行，可是他們并沒有像我們設(shè)想的那樣像瀑布式的排列，那我們該怎么實現(xiàn)呢，這時我們的的JS就要派上用場啦。
三、JS實現(xiàn)后續(xù)布局
通過js實現(xiàn)將第一行后的圖片排列在緊湊的排列在每一列中
代碼如下代碼（附帶有詳細注釋）：
window.onload = function() {
imgLocation('container', 'box')
}
// 獲取到當前有多少張圖片要擺放
function imgLocation(parent, content) {
// 將containerd下所有的內(nèi)容全部取出
var cparent = document.getElementById(parent) //獲取container盒子的標簽
var ccontent = getChildElemnt(cparent, content)//圖片時放在container盒子里的box盒子里的，因此我們還需要定義一個函數(shù)getChildElemnt（）獲取出box里的圖片
var imgWidth = ccontent[0].offsetWidth//獲取css中我們給每張圖片設(shè)置的固定寬度
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[]數(shù)組存放每列的高度
} else { //剩下的圖片我們依次次優(yōu)先選擇擺在高度最低的一列后面
var minHeight = Math.min.apply(null, BoxHeightArr) //通過將Math.min()中求最小值的方法應(yīng)用到數(shù)組中，求出高度最低的列
var minIndex = getMinHeightLocation(BoxHeightArr, minHeight) //確定了高度最低的列后我們就差求出列的位置了,我們通過編寫一個函數(shù)實現(xiàn)
//最后將我們的圖片相對于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('*')//通過內(nèi)置函數(shù)getElementsByTagName()將container中的所有元素取出來
// console.log(allContent);
for (var i = 0; i < allContent.length; i++) {//但是container中所有的元素中我們只需要的是所有的img，為此我們寫個for循環(huán)將所用img篩選出來存放在一個數(shù)組中
if (allContent[i].className == content) {
contentArr.push(allContent[i])
}
}
// console.log(contentArr);
return contentArr
}
//獲取列最高度最小列的位置下標函數(shù)
function getMinHeightLocation(BoxHeightArr, minHeight) {
for (var i in BoxHeightArr) {
if (BoxHeightArr[i] === minHeight) {
return i
}
}
}
JS算法思路及操作：
- 將所有的需要排列的圖像獲取出來
- 因為圖片時放在container盒子里的box盒子里的，因此我們定義了一個函數(shù)getChildElemnt（）獲取出box的里的圖片，在這個函數(shù)中通過內(nèi)置函數(shù)getElementsByTagName()將container中的所有元素取出來，但是container中所有的元素中我們只需要的是所有的img，為此我們寫個for循環(huán)將所用img篩選出來存放在一個我們定義的content[]數(shù)組中。
- 提取到所有圖片后我們就要需要確定圖片排列的位置，我們先將在第一行排滿，剩下的圖排列時依次排在在高度最小的列后面，為此我們在排列每張圖片的時候都需要求出高度最小列以及確定其位置
通過 ccontent[0].offsetWidth （每一張圖片的寬度都是一樣的，因此取數(shù)組中任意元素均可）獲取css中我們給每張圖片設(shè)置的固定寬度，其次利用 document.documentElement.clientWidth 獲取當前網(wǎng)頁比例下瀏覽器的寬度，求出一行最多能整存多少張圖片（即多少列）,再使用for循環(huán)擺放圖片，先將第一行擺滿，創(chuàng)建BoxHeightArr[]數(shù)組存放每列的高度，將Math.min() 方法應(yīng)用于 BoxHeightArr[]數(shù)組中，求出高度最低的列，創(chuàng)建 getMinHeightLocatio()函數(shù)獲取列高度最小列的位置下標，與container div 絕對定位擺放，完成后更新每列列高，直至圖片擺放完成。
總結(jié)
到此這篇關(guān)于HTML+CSS+JS實現(xiàn)圖片的瀑布流布局的示例代碼的文章就介紹到這了,更多相關(guān)HTML瀑布流內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
