流式布局

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 }

 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;}