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

巴特西

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

最新文章

热门文章