JavaScript瀑布流布局实现代码

先说一下什么是瀑布流布局。

就是一堆等宽不等高的数据块组成的页面，如图：

现在好多网站都采用这种瀑布流布局，如蘑菇街。美丽说等等。
首先要实现它就要明白它是怎样排列的。
每一行的列数都是根据图片的宽度和页面的宽度算比例算下来的。。
第一行就是按顺序排列，其他的数据块都是在每一列中挑选出最低的那一列依次排进去的。

首先实现框架。

<div id = "main">
 <div class = "box">
  <div class = "pic">
   <img src = "images/0.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/1.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/2.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/3.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/4.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/5.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/6.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/7.jpg">
  </div>
 </div>

 <div class = "box">
  <div class = "pic">
   <img src = "images/8.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/9.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/10.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/11.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/12.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/13.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/14.jpg">
  </div>
 </div>
</div>

这里定义了14个图片，每个图片都被一个class= box的属性和class= “pic”的属性包裹，在css中定义其样式：

*{
  padding: 0px;
  margin: 0px;
 }

 #main{
  position: relative;

 }
 .box{
/*  display: inline-block;*/
  padding: 15px 0px 0px 15px;
  float: left;

 }
 .pic{
  padding: 10px;
  border-radius: 5px;
  border:1px solid #ccc;
  box-shadow: 0 0 5px #ccc;
 }

 .pic img{
  width: 165px;
  height: auto;
 }
 </style>

效果图如下：

其实每一行六个图片不是固定的，当你缩小窗口时，它会成为两列，或者三列四列。但我们为了以后的布局，就将它设置为固定的列数，即根据窗口的大小除以图片的大小，向下取整。

接下来写的是js实现的瀑布流布局。
在写代码之前，由于要用到box属性，而js中没有直接定义获得class的方法，所以我们在这儿要写一个获得class的方法：

function getbyclass(parent,classname){

 var boxarr = new array();//用来获取所有class为box的元素

 oelement = parent.getelementsbytagname('*');

 for (var i = 0; i <oelement.length; i++) {

  if(oelement[i].classname == classname){

   boxarr.push(oelement[i]);

  }
 };
 return boxarr;
}

两个参数分别是父元素和要查找的classname。

接下来写函数：

//首先在onload函数中调用函数

window.onload = function(){
 waterfull('main','box');
}


function waterfull(parent,children){

 //先获得父元素及其底下所有的class = box的元素
 var oparent = document.getelementbyid(parent);
 var oboxs = getbyclass(oparent,children);

//我们在前面说过，数据块的列数我们是希望不变的。由于每个数据块都是等宽的，所以可以以第一个数据块的宽度为准，获得数据块的宽度。再计算数据块的列数，向下取整。
 var oboxw = oboxs[0].offsetwidth;
 var cols = math.floor(document.documentelement.clientwidth/oboxw);

接下来设置父元素的样式，我们需要获得它的宽度，并且使其居中
oparent.style.csstext = 'width:' cols * oboxw + 'px; margin: 0 auto';

//在定义好了所有的样式之后，就是排列数据块。首先第一行是直接排列的。定义一个数组存放每一列的高度，从第二行开始，使得每一个数据块都排在高度最低的那一列。首先得遍历所有的box，即oboxs

var arrh = []; //定义数组存放每一列的高度
for(var i = 0; i< oboxs.length; i++){
 //当是第一行时，直接将数据块依次排列，并在数组中记录每一列的高度
 if(i < cols){
  arrh[i] = oboxs[i].offsetheight;
 }
 //当i>cols时，即要对前面的所有列的高度进行遍历，将下一个图片放在合适的位置。
 else{
 //首先在数组中找到高度最低的列数。我们都知道有math.min可以找到最小的数字，但是它接受的参数必须是一组数字，所以在这里我们要用math.min.apply()方法

 var minh = math.min.apply(null, arrh); //定义一个变量，存放数组中最小的高度

 //在找出了最小高度之后，我们需要知道它的索引，才能够为接下来的数据块找到合适的位置，所以在下面又定义了一个找出最小值下标的函数。

 //定义一个变量去接受getminhindex函数的返回值
 var minindex = getminhindex(arrh,minh);

 //在获得了高度最小的列数的索引后，就可以将下一个元素放到合适的位置
 oboxs[i].style.position = 'absolute';
 oboxs[i].style.top = minh + 'px';
 oboxs[i].style.left = minindex * oboxw + 'px';

 //将当前的数据块终于都放到了合适的位置，但不要忘了更新arrh数组
 arrh[minindex] += oboxs[i].offsetheight; 
 }

}

}


//获取当前最小值得下标
function getminhindex(array,min){

 for(var i in array){

  if(array[i] == min)

   return i;
 }
}

以上就是完整的瀑布流布局的js实现代码。效果图如下：

附上源代码：

js代码：

window.onload = function(){
 waterfull('main','box');
}

function waterfull(parent,children){
 var oparent = document.getelementbyid(parent);
 //var oboxs = parent.queryselectorall(".box");

  var oboxs = getbyclass(oparent,children);

 //计算整个页面显示的列数

 var oboxw = oboxs[0].offsetwidth;

 var cols = math.floor(document.documentelement.clientwidth/oboxw);

 //设置main的宽度，并且居中

 oparent.style.csstext = 'width:'+oboxw * cols +'px; margin: 0 auto';

 //找出高度最小的图片，将下一个图片放在下面

 //定义一个数组，存放每一列的高度，初始化存的是第一行的所有列的高度

 var arrh = [];

 for(var i = 0; i< oboxs.length ; i++){
  if(i < cols){
   arrh.push(oboxs[i].offsetheight);
  }
  else{
   var minh = math.min.apply(null,arrh);

   var minindex = getminhindex(arrh,minh);

   oboxs[i].style.position = 'absolute';
   oboxs[i].style.top= minh + 'px';
   oboxs[i].style.left = minindex * oboxw + 'px'; 
  // oboxs[i].style.left = arrh[minindex].;

   arrh[minindex] += oboxs[i].offsetheight; 
  }
 }


}
function getbyclass(parent,classname){

 var boxarr = new array();//用来获取所有class为box的元素

 oelement = parent.getelementsbytagname('*');

 for (var i = 0; i <oelement.length; i++) {

  if(oelement[i].classname == classname){

   boxarr.push(oelement[i]);

  }
 };
 return boxarr;
}


//获取当前最小值得下标
function getminhindex(array,min){

 for(var i in array){

  if(array[i] == min)

   return i;
 }
}

html以及css代码：

<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<script src = "./jswaterfll.js"></script>
 <title>瀑布流布局</title>
 <style type="text/css">
 *{
  padding: 0px;
  margin: 0px;
 }

 #main{
  position: relative;

 }
 .box{
/*  display: inline-block;*/
  padding: 15px 0px 0px 15px;
  float: left;

 }
 .pic{
  padding: 10px;
  border-radius: 5px;
  border:1px solid #ccc;
  box-shadow: 0 0 5px #ccc;
 }

 .pic img{
  width: 165px;
  height: auto;
 }
 </style>
</head>
<body>
<div id = "main">
 <div class = "box">
  <div class = "pic">
   <img src = "images/0.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/1.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/2.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/3.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/4.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/5.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/6.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/7.jpg">
  </div>
 </div>

 <div class = "box">
  <div class = "pic">
   <img src = "images/8.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/9.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/10.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/11.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/12.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/13.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/14.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/15.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/16.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/17.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/18.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/19.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/20.jpg">
  </div>
 </div>
 <div class = "box">
  <div class = "pic">
   <img src = "images/21.jpg">
  </div>
 </div>
</div>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。