App下載

在html5中如何實(shí)現(xiàn)圖片的瀑布流布局？案例分享！

來(lái)源: 待在綠匣里的貓 2021-07-30 10:02:21 瀏覽數(shù) (4055)
反饋

在今天小編和大家分享一個(gè)有關(guān)于：“ 在html5中如何實(shí)現(xiàn)圖片的瀑布流布局？ ”這方面的相關(guān)內(nèi)容，下面是小編整理的相關(guān)內(nèi)容資料！

前言

瀑布流布局簡(jiǎn)而言之就是類似瀑布流的布局嘛，這么一講大家可能還是不是了解的很明白，來(lái)來(lái)來(lái)，那現(xiàn)在我給大家上一個(gè)常見(jiàn)的實(shí)例:

在這里插入圖相信大家在百度上搜索圖片時(shí)的時(shí)候，網(wǎng)頁(yè)圖片的布局就是這樣子的吧，什么？你還是不清楚瀑布流，那咱就再我看一個(gè)那沒(méi)關(guān)系，淘寶大家應(yīng)該再熟悉不過(guò)了吧片描述

相信大家在百度上搜索圖片時(shí)的時(shí)候，網(wǎng)頁(yè)圖片的布局就是這樣子的吧，什么？你還是不清楚瀑布流，那咱就再我看一個(gè)那沒(méi)關(guān)系，淘寶大家應(yīng)該再熟悉不過(guò)了吧!

在這里插入圖片描述

我們可以發(fā)現(xiàn)圖中每個(gè)商品框的高度不同的，因此導(dǎo)致我們的商品圖片的高度布局都不在一個(gè)高度上。在百度搜索圖片的時(shí)候我們發(fā)現(xiàn)每張圖片的寬度都是不一樣的那為什么所用圖片的寬度它能剛剛好的占滿一行呢?

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

一、總體效果

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

在這里插入圖片描述 

二、HTML+CSS簡(jiǎn)單布局

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

HTML，CSS代碼如下：

css代碼

*{
          margin: 0;
          padding: 0;
      }
      #container{
          position: relative;
      }
      .box{
          float: left;/* 給每個(gè)存放照片box設(shè)置為浮動(dòng)元素，讓所有的圖片浮動(dòng)到網(wǎng)頁(yè)的第一行*/
          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)頁(yè)的效果是怎樣的的呢？

在這里插入圖片描述

我們給每個(gè)盒子都使用了一個(gè)float：left屬性，讓圖片脫離文檔來(lái)到網(wǎng)頁(yè)的最上端，但是圖片過(guò)多時(shí)有部分圖片被擠到了第二行，可是他們并沒(méi)有像我們?cè)O(shè)想的那樣像瀑布式的排列，那我們?cè)撛趺磳?shí)現(xiàn)呢，這時(shí)我們的的JS就要派上用場(chǎng)啦。

三、JS實(shí)現(xiàn)后續(xù)布局

通過(guò)js實(shí)現(xiàn)將第一行后的圖片排列在緊湊的排列在每一列中

代碼如下代碼（附帶有詳細(xì)注釋）：

window.onload = function() {
    imgLocation('container', 'box')
  }
  
  // 獲取到當(dāng)前有多少?gòu)垐D片要擺放
  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 //這里我們通過(guò)BoxHeightArr[]數(shù)組存放每列的高度
      } else { //剩下的圖片我們依次次優(yōu)先選擇擺在高度最低的一列后面
        var minHeight = Math.min.apply(null, BoxHeightArr) //通過(guò)將Math.min()中求最小值的方法應(yīng)用到數(shù)組中，求出高度最低的列
        var minIndex = getMinHeightLocation(BoxHeightArr, minHeight) //確定了高度最低的列后我們就差求出列的位置了,我們通過(guò)編寫一個(gè)函數(shù)實(shí)現(xiàn)

        //最后將我們的圖片相對(duì)于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('*')//通過(guò)內(nèi)置函數(shù)getElementsByTagName()將container中的所有元素取出來(lái)
    // console.log(allContent);
    for (var i = 0; i < allContent.length; i++) {//但是container中所有的元素中我們只需要的是所有的img，為此我們寫個(gè)for循環(huán)將所用img篩選出來(lái)存放在一個(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算法思路及操作：

  • 將所有的需要排列的圖像獲取出來(lái)
  • 因?yàn)閳D片時(shí)放在container盒子里的box盒子里的，因此我們定義了一個(gè)函數(shù)getChildElemnt（）獲取出box的里的圖片，在這個(gè)函數(shù)中通過(guò)內(nèi)置函數(shù)getElementsByTagName()將container中的所有元素取出來(lái)，但是container中所有的元素中我們只需要的是所有的img，為此我們寫個(gè)for循環(huán)將所用img篩選出來(lái)存放在一個(gè)我們定義的content[]數(shù)組中。
  • 提取到所有圖片后我們就要需要確定圖片排列的位置，我們先將在第一行排滿，剩下的圖排列時(shí)依次排在在高度最小的列后面，為此我們?cè)谂帕忻繌垐D片的時(shí)候都需要求出高度最小列以及確定其位置

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

總結(jié)

相信在通過(guò)上面這篇小編分享的文章中大家對(duì)于：“在html5中如何實(shí)現(xiàn)圖片的瀑布流布局？”這方面的相關(guān)內(nèi)容也有所了解了吧！當(dāng)然在html5中的內(nèi)容和知識(shí)遠(yuǎn)遠(yuǎn)不止如此，我們都可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解！ 


HTML5

0 人點(diǎn)贊