jquery瀑布流布局插件,兼容ie6不支持下拉加载,用于制作分类卡

调用方法

$('需要布局的块').sault()

如果要在图片加载后调用需要使用$(window).load(function(fx){});函数,即等待图片加载完成再调用

3个参数

1.left:左右间隔

2.top:上下间隔

3.split:希望分成几列

全部是数字

实现原理是绝对定位,不用浮动的原因是,浮动会造成空白

为了固定位置,需要在父元素上使用相对定位

Array.prototype.max = function(){  
 return Math.max.apply({},this);
} ;

Array.prototype.min = function(){ 
 return Math.min.apply({},this);
};

(function ( $ ) {
    $.fn.sault=function(options){
        
         var settings = $.extend({
                left:10,
                top:10,
                split:3
            }, options);
 this.css('position','absolute');
 
 
 
            
 $harr=new Array();
   for(var $s=0;$s<settings.split;$s++){
       $float0=this.eq($s);
         $harr[$s]=$float0.height();
         $width=$float0.width();
        
         if($s==0){
             
         }else{
         $float0.css('left',$s*($width+settings.left)+'px');
         }
   };
  
     $count=0;

     this.each(function(){
         
         if($count<settings.split){
             $count++;
         }else{
         $min= $harr.min();
 for(var $i in $harr){
     if($harr[$i]==$min){
         $index=$i;
     };

 };
 
         $(this).css('top',$min+settings.top+'px');
         $harr[$index]=$min+$(this).height()+settings.top;
         $(this).css('left',$index*($width+settings.left)+'px');
         $count++;
     }
     });
    this.parent().height($harr.max()+'px');
    
    }
    
 
}( jQuery ));

 

 

修改,好像在ie8下有兼容性问题,所以有了这个修改

 

Array.prototype.max = function(){  
 return Math.max.apply({},this);
} ;

Array.prototype.min = function(){ 
 return Math.min.apply({},this);
};

(function ( $ ) {
    $.fn.sault=function(options){
        
         var settings = $.extend({
                left:10,
                top:10,
                split:3
            }, options);
 this.css('position','absolute');
 
 
 
            
 $harr=new Array();
   for(var $s=0;$s<settings.split;$s++){
       $float0=this.eq($s);
         $harr[$s]=$float0.height();
         $width=$float0.width();
        
         if($s==0){
             
         }else{
         $float0.css('left',$s*($width+settings.left)+'px');
         }
   };
  
     $count=0;

     this.each(function(){
         
         if($count<settings.split){
             $count++;
         }else{
         $min= $harr.min();
 for(var $i in $harr){
     if($harr[$i]==$min){
         $index=$i;
     };

 };
 
         $(this).css('top',$min+settings.top+'px');
         $harr[$index]=$min+$(this).height()+settings.top;
         $(this).css('left',$index*($width+settings.left)+'px');
         $count++;
     }
     });
     this.parent().height($harr.max()+'px');
    this.parent().height($harr.max()+20+'px\0');
    
    };
    
 
}( jQuery ));