原理：

  1. 获取一张图片的宽度(所有图片的宽度是一定的)。

  2. 计算出浏览器一行图片的列数(页面宽度/图片宽度)。

  3. new 一个新的数组，用于存放叠加图片的高度。

  4. for循环图片个数，小于列数时，直接往页面上添加，同时把该图片的高度push到数组中。

  5. 大于列数时，图片的高度往上叠加。

HTML部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
< 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 >   
</ body >

CSS部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
*{
    margin : 0 ;
    padding : 0 ;
}
 
#main{ position :  relative ;}
.box{
      padding : 15px  0  0  15px ;
      float : left ;
    }
.pic{
      padding : 10px ;
      border : 1px  solid  #ccc ;
      border-radius: 5px ;
      box-shadow: 0px  0px  5px  #ccc ;
 
 
 
}
.pic img{
     width : 165px ;
     height : auto ;
}

最核心的部分--JS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
window.onload = function () {
     waterfall( 'main' ,  'box' );
}
function  waterfall(parent,box){
     var  oParent =  document.getElementById(parent);
     var  oBoxs=getByClass(oParent,box); //获取父元素下的所有的class为box的子元素
     var  oBoxW=oBoxs[0].offsetWidth;
     //列数
     var  clos=Math.floor(document.documentElement.clientWidth/oBoxW);
 
     //设置main的宽度
     oParent.style.cssText= 'width:' +oBoxW*clos+ 'px;margin:0 auto' ;
 
     var  arrH= new  Array();
     for ( var  i=0;i<oBoxs.length;i++){
         if (i<clos){
             arrH.push(oBoxs[i].offsetHeight);
         } else {
         //获取高度最小的图片
             var  minH=Math.min.apply( null ,arrH);
            
             //获取高度最小的图片的index
             var  index=getIndexMinH(arrH,minH);
             
            oBoxs[i].style.position= 'absolute' ;
            oBoxs[i].style.top=arrH[index];
            oBoxs[i].style.left=oBoxs[index].offsetLeft;
            arrH[index]=arrH[index]+oBoxs[i].offsetHeight;
 
         }
     }
    console.log(arrH);
}
function  getByClass(parent,box){
     var  boxs= new  Array(); //用来存取box的元素
     tags= parent.getElementsByTagName( '*' ); //获取父元素下的所有元素
     for ( var  i=0;i<tags.length;i++){
         if (tags[i].className==box){
             boxs.push(tags[i]);
         }
     }
     return  boxs;
}
function  getIndexMinH(arr,val){
     for ( var  i  in  arr){
        if (arr[i]==val){
            return  i;
        }
     }
}