快捷導(dǎo)航

JavaScript實(shí)現(xiàn)瀑布流布局的代碼分享

更新時(shí)間：2023年04月12日 10:47:14 作者：深藏blue9

不知道大家在線上購(gòu)物的時(shí)候有沒有發(fā)現(xiàn)到，自己逛起來根本就停不下來，越往下翻越是覺得就會(huì)出現(xiàn)需要的東西，這就是很多電商公司都在使用的瀑布流布局。本文就來用JS實(shí)現(xiàn)這一布局，需要的可以參考一下

前言

不知道大家在線上購(gòu)物的時(shí)候有沒有發(fā)現(xiàn)到，自己逛起來根本就停不下來，越往下翻越是覺得就會(huì)出現(xiàn)需要的東西。這就是很多電商公司都在使用的瀑布流布局，為了更好的留住用戶，給你的感覺就是下面會(huì)有更精彩的東西，讓你不停地往下滑，一步步走進(jìn)消費(fèi)“陷阱”。如何實(shí)現(xiàn)瀑布流布局，這也是阿里面試的經(jīng)典考題。

如何實(shí)現(xiàn)

思路：將內(nèi)容寬度一致，高度不一致的圖片，從左至右排列，一行內(nèi)容排滿后，下一張就會(huì)按順序排在最短的內(nèi)容后，以此類推。

html部分

在頁(yè)面放入20個(gè)box容器（幾張圖片就放幾個(gè)容器），為方便給圖片添加好看的樣式，我在box容器里放了個(gè)box-img容器，再將圖片放入。

<body>
    <div id="container">
        <div class="box">
            <div class="box-img">
                <img src="./img1/1 (1).JPG" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="./img1/1 (2).JPG" alt="">
            </div>
        </div>
/*此處省多個(gè)box 幾張圖片就放幾個(gè)box容器*/
</body>

css部分

        * {
            margin: 0;
            padding: 0;
        }
        /*讓圖片向左浮動(dòng)*/
        .box {
            float: left;
        }
        /*定位*/
        .container {
            position: relative;
        }
        /*給圖片容器設(shè)置相同的寬度 邊框 盒子陰影*/
        .box-img {
            width: 150px;
            padding: 5px;
            border: 1px solid #ccc;
            box-shadow: 0 0 5px #ccc;
        }
         /*讓圖片與圖片容器寬度相等*/
        .box-img img {
            width: 100%;
        }

js部分

我們的目的其實(shí)就是要擺放圖片的位置，先獲取到所有的圖片，當(dāng)?shù)谝慌畔蜃蟾?dòng)擺放好后，我們需要找到在第二排開始從誰(shuí)是被需要擺放位置的。那就用屏幕視窗的寬度除以一個(gè)圖片盒子的寬度，向下取整，那就知道第一行能放幾張圖，然后我們操作第num張之后的每一張圖，把它們一一擺放到最矮那一列的位置。

window.onload = function() {    
    imgLocation('container', 'box')
  }
  
//獲取到所有要擺放的圖片
 function imgLocation(parent,content){
    var cparent = document.getElementById(parent)
    // cparent 下的所有的第一層的子容器 box
    var ccontent = getChildElement(cparent,content)  //[裝了20個(gè)div]

    //找從誰(shuí)開始是需要被擺放位置的
    var winWidth = document.documentElement.clientWidth //獲取視窗的寬度
    var imgWidth = ccontent[0].offsetWidth              //獲取圖片盒子的寬度
    var num = Math.floor(winWidth / imgWidth)           //向下取整

    // 操作第 num+1 張圖
    var BoxHeightArr = []
    for (var i = 0; i < ccontent.length; i++){
        // 前num張只要計(jì)算高度
        if (i < num) {
            BoxHeightArr[i] = ccontent[i].offsetHeight 
        }else{
            //我們要操作的Box
            var minHeight = Math.min.apply(null,BoxHeightArr)
            var minIndex = BoxHeightArr.indexOf(minHeight)

            ccontent[i].style.position = 'absolute'
            ccontent[i].style.top = minHeight + 'px'
            ccontent[i].style.left = (imgWidth * minIndex) + 'px'

            //更新最矮的那一列的高度
            BoxHeightArr[minIndex] = BoxHeightArr[minIndex] + ccontent[i].offsetHeight          
        }
    }
 }

在外面創(chuàng)建一個(gè)輔助函數(shù)，可以幫我們?nèi)〉礁溉萜髦械哪骋粚幼尤萜?/p>

function getChildElement(parent,content){
   var contentArr = []
   var allContent = parent.getElementsByTagName('*') //[xxxx數(shù)組]
   //遍歷allContent 把中其類名為 content 的容器都存到contentArr數(shù)組中
   for (var i = 0; i < allContent.length; i++){
       //當(dāng)前這個(gè)容器的類名是否為 content
       if (allContent[i].className == content){
           contentArr.push(allContent[i])
       } 
   }
   return contentArr
}

實(shí)現(xiàn)效果圖如下：