流式布局

 

27         'margin': '0 auto'
28     });
29 
30     var pinHArr=[];//用于存储 每列中的所有块框相加的高度。
31 
32     $aPin.each( function( index, value ){
33         var pinH = $aPin.eq( index ).height();
34         if( index < num ){
35             pinHArr[ index ] = pinH; //第一行中的num个块框pin 先添加进数组pinHArr
36         }else{
37             var minH = Math.min.apply( null, pinHArr );//数组pinHArr中的最小值minH
38             var minHIndex = $.inArray( minH, pinHArr );
39             $( value ).css({
40                 'position': 'absolute',
41                 'top': minH + 15,
42                 'left': $aPin.eq( minHIndex ).position().left
43             });
44             //数组 最小高元素的高 + 添加上的aPin[i]块框高
45             pinHArr[ minHIndex ] += $aPin.eq( index ).height() + 15;//更新添加了块框后的列高
46         }
47     });
48 }
49 
50 function checkscrollside(){
51     var $aPin = $( "#main>div" );
52     var lastPinH = $aPin.last().get(0).offsetTop + Math.floor($aPin.last().height()/2);//创建【触发添加块框函数waterfall()】的高度：最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载)
53     var scrollTop = $( window ).scrollTop()//注意解决兼容性
54     var documentH = $( document ).height();//页面高度
55     return (lastPinH < scrollTop + documentH ) ? true : false;//到达指定高度后 返回true，触发waterfall()函数
56 }

三、CSS多栏布局

     

 1 .container{
 2     -webkit-column-width:160px;
 3     -moz-column-width:160px; 
 4       -webkit-column-gap:5px;
 5       -moz-column-gap:5px;
 6 }
 7 
 8 
 9 /*数据块 砖块*/
10 
11 .container div{width:160px;
12                margin:4px 0;}

【css3和js实现方法比较】
--css3方式--
1：不需要计算，浏览器自动计算，只需设置1列宽，性能高
2:列宽随着浏览器宽口大小进行改变，用户体验不好；
3：图片排序按照垂直顺序排列，打乱图片显示顺序
4.图片加载还是需要js
--js方式--
js实现的瀑布流不会有上面的缺点，但是性能相对要差！