如何用JS實現網頁瀑布流布局

更新時間：2021年04月24日 11:56:26 作者：范佐

這篇文章主要介紹了如何用JS實現網頁瀑布流布局，幫助大家更好的利用JavaScript制作網頁，感興趣的朋友可以了解下

前言：

瀑布流又稱瀑布流式布局，是比較流行的一種網站頁面布局方式。即多行等寬元素排列，后面的元素依次添加到其后，等寬不等高，根據圖片原比例縮放直至寬度達到我們的要求，依次按照規(guī)則放入指定位置。

什么是瀑布流布局：

先看效果：

圖片多行等寬元素排列，后面的元素依次添加到其后，等寬不等高，根據圖片原比例縮放直至寬度達到我們的要求，依次按照規(guī)則放入指定位置。
為了方便理解，在此先給上html、css代碼

不完整html代碼：

<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>
     ......<!-- 省略了圖片，多少張圖片自行決定-->

完整的css代碼

*{
        padding: 0;
        margin: 0;
    }
    #container{
        position: relative;
    }
    .box{
        float: left;
        padding: 15px;
    }
    .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;
    }

如何實現：

簡單地來說，如果要實現瀑布流布局，得完成這幾件事✍

1. 獲取圖片

function getChildElemnt() {
    const contentArr = []//定義數組準備裝圖
    const parent = document.getElementById(container)//得到整個頁面
    const allContent = parent.getElementsByTagName('*')//得到整個標簽
    console.log(allContent);
    for (var i = 0; i < allContent.length; i++) {
      if (allContent[i].className == 'box') {
        contentArr.push(allContent[i])//將class='box'的標簽裝入數組
      }
    }
    console.log(contentArr);
    return contentArr//返回數組
 }

2. 設置圖片寬帶

 var ccontent = getChildElemnt()
  var imgWidth = ccontent[0].offsetWidth//令所有圖片寬度等于第一張圖片

3. 計算瀏覽器頁面一行最多能存放圖片的數量

var dWidth=document.documentElement.clientWidth//頁面寬度
var num = Math.floor(dWidth/ imgWidth)
//Math.floor()向下取整

4. 比較圖片高度

因為在瀑布流布局中，當第一行圖片已經擺滿后，第二行的第一張圖片要放在第一行中高度最小的圖片的下面

var BoxHeightArr = []//定義一個數組，把每張圖片的高度依次放進去
    for (var i = 0; i < ccontent.length; i++) {
      if (i < num) {
        BoxHeightArr[i] = ccontent[i].offsetHeight//將圖片的高度存入數組
      } else {//當第一行已經存放不了圖片后
        var minHeight = Math.min.apply(null, BoxHeightArr)//比較出上一行最小的高度
        
      }
    }

5. 得到上一行中最小高度圖片的位置

//定義一個getMinHeightLocation函數，給它傳入BoxHeightArr上一行全部圖片，和minHeight上一行圖片的最小高度
  function getMinHeightLocation(BoxHeightArr, minHeight) {
    for (var i in BoxHeightArr) {
      if (BoxHeightArr[i] === minHeight) {//當圖片高度等于最小高度時，該圖片的位置為最小高度圖片的位置
        return i
      }
    }
  }

6. 插圖

    for (var i = 0; i < ccontent.length; i++) {
    if (i < num) {
      BoxHeightArr[i] = ccontent[i].offsetHeight
    } else {
      var minHeight = Math.min.apply(null, BoxHeightArr)
      var minIndex = getMinHeightLocation(BoxHeightArr, minHeight)
      ccontent[i].style.position = 'absolute'//將要插入的圖片絕對定位，即元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定
      ccontent[i].style.top = minHeight + 'px'//令插入的圖片到頂端的距離剛好等于要插其下面圖片的高度
      ccontent[i].style.left = ccontent[minIndex].offsetLeft + 'px'//令插入的圖片到最左邊的距離剛好等于要插其下面圖片到最左邊的距離
      BoxHeightArr[minIndex] = BoxHeightArr[minIndex] + ccontent[i].offsetHeight//插入圖片后，得將這位置的高度設為兩張圖片的高度和
    }
  }

完整代碼如下：

優(yōu)化代碼，提高性能

window.onload = function() {
  imgLocation('container', 'box')//構造函數imgLocation
}
//用window.onload = function() {}函數就不用等著body頁面中調用就可以執(zhí)行了

// 獲取到當前有多少張圖片要擺放
function imgLocation(parent, content) {//令parent='container'，content='box'
  // 將parent下所有的內容全部取出
  var cparent = document.getElementById(parent)
  var ccontent = getChildElemnt(cparent, content)
  var imgWidth = ccontent[0].offsetWidth
  var num = Math.floor(document.documentElement.clientWidth / imgWidth)
  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
    } else {
      var minHeight = Math.min.apply(null, BoxHeightArr)
      var minIndex = getMinHeightLocation(BoxHeightArr, minHeight)
      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) {parent='container'，content='box'
  const contentArr = []
  const allContent = parent.getElementsByTagName('*')
  console.log(allContent);
  for (var i = 0; i < allContent.length; i++) {
    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實現網頁瀑布流布局的詳細內容，更多關于JS實現網頁瀑布流布局的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

FireFox下XML對象轉化成字符串的解決方法
近，在客戶端解吸xml時候，需要將XML轉化成字符串，看了很多文章，介紹的最多的是將XML字符串轉化成對象
2011-12-12
JavaScript實現下拉列表
這篇文章主要為大家詳細介紹了JavaScript實現下拉列表，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-01-01
nuxt配置通過指定IP和端口訪問的實現
這篇文章主要介紹了nuxt配置通過指定IP和端口訪問的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-01-01
javascript筆試題目附答案@20081025_jb51.net
網上找的javascript筆試題目，留檔給自己作參考。
2008-10-10
Javascript實現字數統(tǒng)計
現在流行的Twitter等微博客網站，有一個很好的用戶體驗，就是在文本框中輸入文字的時候，會自動統(tǒng)計輸入的字符，并顯示用戶還能輸入的字符，在限制了140個字的微博客中，這樣的小提示可以很好的增強用戶體驗。
2015-07-07
js 深拷貝函數
Javascript中的對像賦值與Java中是一樣的,都為引用傳遞.就是說,在把一個對像賦值給一個變量時,那么這個變量所指向的仍就是原來對像的地址.那怎么來做呢答案是克隆.
2008-12-12
uniapp實現釘釘掃碼登錄示例代碼
由于uniapp暫無釘釘授權登錄所以本文將釘釘掃碼登錄作為網頁嵌入uniapp，最終實現釘釘掃碼登錄app，本文通過實例代碼給大家介紹uniapp釘釘掃碼登錄功能，感興趣的朋友一起看看吧
2021-12-12
js幾個不錯的函數 $$()
js幾個不錯的函數 $$()...
2006-10-10
JS快速掌握ES6的class用法
這篇文章主要介紹了JS快速掌握ES6的class用法，想了解ES6的同學，一定要看一下
2021-05-05
javaScript 刪除字符串空格多種方法小結
在js中自一些字符串刪除空格的功能，本文章來介紹了字符串刪除功能加利用正則快速替換字符串中所有空格實現代碼
2012-10-10