如何用js實(shí)現(xiàn)瀑布流布局

這篇“如何用js實(shí)現(xiàn)瀑布流布局”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“如何用js實(shí)現(xiàn)瀑布流布局”文章吧。

成都服務(wù)器托管，創(chuàng)新互聯(lián)公司提供包括服務(wù)器租用、四川電信科技城機(jī)房、帶寬租用、云主機(jī)、機(jī)柜租用、主機(jī)租用托管、CDN網(wǎng)站加速、域名注冊(cè)等業(yè)務(wù)的一體化完整服務(wù)。電話咨詢：13518219792

一、前端代碼編寫

1、首先我們定義一個(gè)container容器來(lái)裝所有圖片，在這個(gè)容器中用box容器裝box-img容器再裝入每張圖片，這樣方便之后樣式的編寫。

2、使圖片同行顯示--給box容器使用float:left;屬性。

3、讓圖片等寬顯示--給box-img容器設(shè)置width:150px;，img標(biāo)簽設(shè)置width:100%;繼承父容器box-img高度的100%。

4、為了使效果更好看，我們給裝圖片的容器設(shè)置內(nèi)邊距，邊框和陰影的效果。

前端完整代碼附上：

<!DOCTYPE html>
<html>
<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>waterFall</title>
   <script src="./index.js"></script>
</head>
<style>
   *{
       margin: 0;
       padding: 0;
   }
   .container {
       overflow: hidden;
       position: relative;
   }
   .box{
       float: left;
       padding: 5px;
   }
   .box-img{
       width: 150px;
       padding: 5px;
       border: 1px solid #484848;
       box-shadow: 0 0 5px #484848;
   }
   .box-img img{
       width: 100%;
   }
</style>
<body>
   <div id="container">
       <div>
           <div>
               <img src="./img/1.jpg" alt="">
          </div>
       </div>
       /*.......后面接39個(gè)box，此處省略*/
   </div>
   
</body>
</html>

二、js代碼編寫

1、首先用window.onload=function(){}來(lái)實(shí)現(xiàn)頁(yè)面加載完畢后立即執(zhí)行的功能

在這個(gè)函數(shù)中，我們調(diào)用imgLocation('container','box')函數(shù)來(lái)呈現(xiàn)最終效果，傳入的實(shí)參是父容器'container'以及裝圖片的子容器'box'。

window.onload=function() {
   imgLocation('container','box')
}

2、實(shí)現(xiàn)imgLocation()函數(shù)功能

1）首先我們得`獲取所有要擺放的圖片`，并將其存入一個(gè)`數(shù)組`中

利用document.getElementById(parent)得到父容器；

調(diào)用getChildElement(cparent,content)方法，在這個(gè)方法中，先獲取父容器所有標(biāo)簽，對(duì)所有標(biāo)簽遍歷并用if條件語(yǔ)句得到類名為box的容器（裝圖片的容器），將其存入我們自己構(gòu)建的一個(gè)數(shù)組中，返回值為這個(gè)數(shù)組，方便之后通過(guò)遍歷來(lái)操作圖片擺放的位置。

function imgLocation(parent,content){
   var cparent=document.getElementById(parent)
   //cparent下的所有的第一層的子容器 box
   var ccontent=getChildElement(cparent,content)//數(shù)組，40個(gè)div
}

//取到父容器中的某一層子容器
function getChildElement(parent,content){
   var contentArr=[]
   var allContent=parent.getElementsByTagName('*')//通過(guò)標(biāo)簽來(lái)選中得到一個(gè)數(shù)組
   //遍歷allContent把其中類名為content的容器都存到contentArr數(shù)組中
   for(var i=0;i<allContent.length;i++){
       if(allContent[i].className==content){    //當(dāng)前這個(gè)容器的類名是否為content
           contentArr.push(allContent[i])
       }
   }
   return contentArr;

}

2）得到這個(gè)`數(shù)組`后，找出`從誰(shuí)開始`是需要`被擺放`位置的

我們采用以下方法：

首先獲取視窗的寬度和每張圖片的寬度，將兩者相除并向下取整可得到第一行可以放置圖片的數(shù)量，自然也就知道了我們需要操作的那張圖片的序號(hào)。

    //從誰(shuí)開始是需要被擺放位置的
   var winWidth=document.documentElement.clientWidth;//視窗寬度
   var imgWidth=ccontent[0].offsetWidth;//圖片寬度

   var num=Math.floor(winWidth/imgWidth)//第一行能放幾張圖

3）得到需要`被擺放`位置的圖片序號(hào)后，確定其`擺放位置`

我們自己定義一個(gè)存儲(chǔ)高度的數(shù)組，對(duì)前一行元素的高度進(jìn)行遍歷并存入數(shù)組，當(dāng)遍歷到需要被擺放位置的圖片時(shí)，用Math.min()方法獲取前一行高度最矮的元素高度，并用indexOf()方法獲取到其下標(biāo)。

再對(duì)我們所操作的這個(gè)圖片容器的樣式調(diào)整：
position：absolute;絕對(duì)定位，top值設(shè)置為前一行高度最矮的圖片高度minHeight，left值設(shè)置為單張圖片寬度乘這張圖片的下標(biāo)minIndex。

最后，不要忘啦，擺放好圖片后，還要更新擺放的那一列的高度喲~

    //操作num+1張圖
   var BoxHeightArr=[]
   for(var i=0;i<ccontent.length;i++){
       //前num張只要計(jì)算高度
       if(i<num){
           BoxHeightArr[i]=ccontent[i].offsetHeight
       }
       else{
           //我們要操作的box  :ccontent[i]
           var minHeight=Math.min.apply(null,BoxHeightArr)//apply:把最小值這個(gè)方法借給它用
           var minIndex=BoxHeightArr.indexOf(minHeight)//返回?cái)?shù)組下標(biāo)
           ccontent[i].style.position='absolute'//style設(shè)置樣式
           ccontent[i].style.top=minHeight+'px'
           ccontent[i].style.left=imgWidth*minIndex+'px'

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

以上就是關(guān)于“如何用js實(shí)現(xiàn)瀑布流布局”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享題目：如何用js實(shí)現(xiàn)瀑布流布局
URL地址：http://www.aaarwkj.com/article26/gihgcg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、網(wǎng)頁(yè)設(shè)計(jì)公司、動(dòng)態(tài)網(wǎng)站、品牌網(wǎng)站制作、網(wǎng)站導(dǎo)航、網(wǎng)站營(yíng)銷

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

如何用js實(shí)現(xiàn)瀑布流布局

一、前端代碼編寫

二、js代碼編寫

1、首先用window.onload=function(){}來(lái)實(shí)現(xiàn)頁(yè)面加載完畢后立即執(zhí)行的功能

2、實(shí)現(xiàn)imgLocation()函數(shù)功能

1）首先我們得獲取所有要擺放的圖片，并將其存入一個(gè)數(shù)組中

2）得到這個(gè)數(shù)組后，找出從誰(shuí)開始是需要被擺放位置的

3）得到需要被擺放位置的圖片序號(hào)后，確定其擺放位置

1、首先用window.onload=function(){}來(lái)實(shí)現(xiàn)頁(yè)面加載完畢后立即執(zhí)行的功能

2、實(shí)現(xiàn)imgLocation()函數(shù)功能

1）首先我們得`獲取所有要擺放的圖片`，并將其存入一個(gè)`數(shù)組`中

2）得到這個(gè)`數(shù)組`后，找出`從誰(shuí)開始`是需要`被擺放`位置的

3）得到需要`被擺放`位置的圖片序號(hào)后，確定其`擺放位置`