HTML+CSS+JS實(shí)現(xiàn)圖片的瀑布流布局的示例代碼
我要評論前言
瀑布流布局簡而言之就是類似瀑布流的布局嘛，這么一講大家可能還是不是了解的很明白，來來來，那現(xiàn)在我給大家上一個(gè)常見的實(shí)例:
相信大家在百度上搜索圖片時(shí)的時(shí)候，網(wǎng)頁圖片的布局就是這樣子的吧，什么？你還是不清楚瀑布流，那咱就再我看一個(gè)那沒關(guān)系，淘寶大家應(yīng)該再熟悉不過了吧!
我們可以發(fā)現(xiàn)圖中每個(gè)商品框的高度不同的，因此導(dǎo)致我們的商品圖片的高度布局都不在一個(gè)高度上。在百度搜索圖片的時(shí)候我們發(fā)現(xiàn)每張圖片的寬度都是不一樣的那為什么所用圖片的寬度它能剛剛好的占滿一行呢?
這就是我今天今天教大家的布局方式——waterfall 布局，那該怎么實(shí)現(xiàn)呢？那我們就不多說啦，直接上干貨!
一、總體效果
瀑布流的搭建完的效果如下：
二、HTML+CSS簡單布局
首先大家在網(wǎng)上搜索一些圖片或者用一下自己喜歡的圖片均可，用html搭建好框架網(wǎng)頁的框架將圖片存放好，我們這里使用的了20張圖為例。其次使用html+css實(shí)現(xiàn)一個(gè)簡單的布局，這有個(gè)關(guān)鍵的步驟：我們對比上面百度和淘寶頁面的瀑布流布局就不難發(fā)現(xiàn)，要實(shí)現(xiàn)瀑布流所有圖片都得有個(gè)相同的高度或者高度。因此我們這就給所用照片設(shè)置一個(gè)固定的寬度，但不限定的圖片的高度保證每圖片都按其原始比例完整展示出來。
HTML，CSS代碼如下：
css代碼
*{
margin: 0;
padding: 0;
}
#container{
position: relative;
}
.box{
float: left;/* 給每個(gè)存放照片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)頁的效果是怎樣的的呢？
我們給每個(gè)盒子都使用了一個(gè)float：left屬性，讓圖片脫離文檔來到網(wǎng)頁的最上端，但是圖片過多時(shí)有部分圖片被擠到了第二行，可是他們并沒有像我們設(shè)想的那樣像瀑布式的排列，那我們該怎么實(shí)現(xiàn)呢，這時(shí)我們的的JS就要派上用場啦。
三、JS實(shí)現(xiàn)后續(xù)布局
通過js實(shí)現(xiàn)將第一行后的圖片排列在緊湊的排列在每一列中
代碼如下代碼（附帶有詳細(xì)注釋）：
window.onload = function() {
imgLocation('container', 'box')
}
// 獲取到當(dāng)前有多少張圖片要擺放
function imgLocation(parent, content) {
// 將containerd下所有的內(nèi)容全部取出
var cparent = document.getElementById(parent) //獲取container盒子的標(biāo)簽
var ccontent = getChildElemnt(cparent, content)//圖片時(shí)放在container盒子里的box盒子里的，因此我們還需要定義一個(gè)函數(shù)getChildElemnt（）獲取出box里的圖片
var imgWidth = ccontent[0].offsetWidth//獲取css中我們給每張圖片設(shè)置的固定寬度
var num = Math.floor(document.documentElement.clientWidth / imgWidth) //獲取瀏覽器body的寬度計(jì)算最多能放幾張我們的圖片
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) //確定了高度最低的列后我們就差求出列的位置了,我們通過編寫一個(gè)函數(shù)實(shí)現(xiàn)
//最后將我們的圖片相對于container盒子進(jìn)行定位放在每一列下就可以啦
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，為此我們寫個(gè)for循環(huán)將所用img篩選出來存放在一個(gè)數(shù)組中
if (allContent[i].className == content) {
contentArr.push(allContent[i])
}
}
// console.log(contentArr);
return contentArr
}
//獲取列最高度最小列的位置下標(biāo)函數(shù)
function getMinHeightLocation(BoxHeightArr, minHeight) {
for (var i in BoxHeightArr) {
if (BoxHeightArr[i] === minHeight) {
return i
}
}
}
JS算法思路及操作：
- 將所有的需要排列的圖像獲取出來
- 因?yàn)閳D片時(shí)放在container盒子里的box盒子里的，因此我們定義了一個(gè)函數(shù)getChildElemnt（）獲取出box的里的圖片，在這個(gè)函數(shù)中通過內(nèi)置函數(shù)getElementsByTagName()將container中的所有元素取出來，但是container中所有的元素中我們只需要的是所有的img，為此我們寫個(gè)for循環(huán)將所用img篩選出來存放在一個(gè)我們定義的content[]數(shù)組中。
- 提取到所有圖片后我們就要需要確定圖片排列的位置，我們先將在第一行排滿，剩下的圖排列時(shí)依次排在在高度最小的列后面，為此我們在排列每張圖片的時(shí)候都需要求出高度最小列以及確定其位置
通過 ccontent[0].offsetWidth （每一張圖片的寬度都是一樣的，因此取數(shù)組中任意元素均可）獲取css中我們給每張圖片設(shè)置的固定寬度，其次利用 document.documentElement.clientWidth 獲取當(dāng)前網(wǎng)頁比例下瀏覽器的寬度，求出一行最多能整存多少張圖片（即多少列）,再使用for循環(huán)擺放圖片，先將第一行擺滿，創(chuàng)建BoxHeightArr[]數(shù)組存放每列的高度，將Math.min() 方法應(yīng)用于 BoxHeightArr[]數(shù)組中，求出高度最低的列，創(chuàng)建 getMinHeightLocatio()函數(shù)獲取列高度最小列的位置下標(biāo)，與container div 絕對定位擺放，完成后更新每列列高，直至圖片擺放完成。
總結(jié)
到此這篇關(guān)于HTML+CSS+JS實(shí)現(xiàn)圖片的瀑布流布局的示例代碼的文章就介紹到這了,更多相關(guān)HTML瀑布流內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了3種方式實(shí)現(xiàn)瀑布流布局小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)2019-09-05
這篇文章主要介紹了小程序瀑布流解決左右兩邊高度差距過大的問題的相關(guān)資料，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-20css3 column實(shí)現(xiàn)卡片瀑布流布局的示例代碼
這篇文章主要介紹了css3 column實(shí)現(xiàn)卡片瀑布流布局的示例代碼的相關(guān)資料，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-22
這篇文章主要介紹了HTML5 canvas 瀑布流文字效果的示例代碼的相關(guān)資料,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-31- 這篇文章主要介紹了用CSS3實(shí)現(xiàn)瀑布流布局的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-10
CSS3實(shí)現(xiàn)瀑布流布局與無限加載圖片相冊的實(shí)例代碼
本篇文章主要介紹了CSS3實(shí)現(xiàn)瀑布流布局與無限加載圖片相冊的實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2016-12-22- 這篇文章主要為大家詳細(xì)介紹了CSS3使用多列制作瀑布流的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-05-10
- 這篇文章主要介紹了css和js實(shí)現(xiàn)瀑布流效果示例,需要的朋友可以參考下2014-05-05
HTML5實(shí)現(xiàn)的圖片無限加載的瀑布流效果另帶邊框圓角陰影
一款網(wǎng)頁瀑布流效果，可以實(shí)現(xiàn)圖片的無限制加載?；跁r(shí)下流行的HTML5技術(shù)編寫而成，除了實(shí)現(xiàn)瀑布流，還加入了CSS5的圖片修飾效果，比如圖片的圓角邊框、圖片陰影立體效果2014-03-07
