如何用js实现瀑布流布局

一、前端代码编写

1、首先我们定义一个container容器来装所有图片，在这个容器中用box容器装box-img容器再装入每张图片，这样方便之后样式的编写。

2、使图片同行显示--给box容器使用float:left; 属性。

3、让图片等宽显示--给box-img容器设置width:150px; ，img标签设置width:100%; 继承父容器box-img高度的100%。

4、为了使效果更好看，我们给装图片的容器设置内边距，边框和阴影的效果。

前端完整代码附上：

!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个box，此处省略*/
  /div>
    
  
/body>
    
/html>

二、js代码编写

1、首先用window.onload=function(){ } 来实现页面加载完毕后立即执行的功能

在这个函数中，我们调用imgLocation('container','box')函数来呈现最终效果，传入的实参是父容器'container'以及装图片的子容器'box'。

window.onload=function() {

  imgLocation('container','box')
}
    

2、实现imgLocation()函数功能

1）首先我们得获取所有要摆放的图片，并将其存入一个数组中

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

调用getChildElement(cparent,content)方法，在这个方法中，先获取父容器所有标签，对所有标签遍历并用if条件语句得到类名为box的容器（装图片的容器），将其存入我们自己构建的一个数组中，返回值为这个数组，方便之后通过遍历来操作图片摆放的位置。

function imgLocation(parent,content){

  var cparent=document.getElementById(parent)
  //cparent下的所有的第一层的子容器 box
  var ccontent=getChildElement(cparent,content)//数组，40个div
}


//取到父容器中的某一层子容器
function getChildElement(parent,content){
    
  var contentArr=[]
  var allContent=parent.getElementsByTagName('*')//通过标签来选中得到一个数组
  //遍历allContent把其中类名为content的容器都存到contentArr数组中
  for(var i=0;
    iallContent.length;
i++){

    if(allContent[i].className==content){
  //当前这个容器的类名是否为content
      contentArr.push(allContent[i])
    }

  }
    
  return contentArr;


}
    

2）得到这个数组后，找出从谁开始是需要被摆放位置的

我们采用以下方法：

首先获取视窗的宽度和每张图片的宽度，将两者相除并向下取整可得到第一行可以放置图片的数量，自然也就知道了我们需要操作的那张图片的序号。

  //从谁开始是需要被摆放位置的
  var winWidth=document.documentElement.clientWidth;
    //视窗宽度
  var imgWidth=ccontent[0].offsetWidth;
    //图片宽度

  var num=Math.floor(winWidth/imgWidth)//第一行能放几张图

3）得到需要被摆放位置的图片序号后，确定其摆放位置

我们自己定义一个存储高度的数组，对前一行元素的高度进行遍历并存入数组，当遍历到需要被摆放位置的图片时，用Math.min()方法获取前一行高度最矮的元素高度，并用indexOf()方法获取到其下标。

再对我们所操作的这个图片容器的样式调整：
position：absolute; 绝对定位，top值设置为前一行高度最矮的图片高度minHeight，left值设置为单张图片宽度乘这张图片的下标minIndex。

最后，不要忘啦，摆放好图片后，还要更新摆放的那一列的高度哟~

  //操作num+1张图
  var BoxHeightArr=[]
  for(var i=0;
    iccontent.length;
i++){

    //前num张只要计算高度
    if(inum){

      BoxHeightArr[i]=ccontent[i].offsetHeight
    }

    else{

      //我们要操作的box :ccontent[i]
      var minHeight=Math.min.apply(null,BoxHeightArr)//apply:把最小值这个方法借给它用
      var minIndex=BoxHeightArr.indexOf(minHeight)//返回数组下标
      ccontent[i].style.position='absolute'//style设置样式
      ccontent[i].style.top=minHeight+'px'
      ccontent[i].style.left=imgWidth*minIndex+'px'

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

  }
    

以上就是关于“如何用js实现瀑布流布局”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注行业资讯频道。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！