zoukankan      html  css  js  c++  java
  • 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 ));
    View Code

    修改,好像在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');
        
        };
        
     
    }( jQuery ));
    View Code

  • 相关阅读:
    腾讯微博
    城市左右选择添加按钮案例
    jQuery元素操作1
    动态创建表格
    五角星评论案例
    点击图片箭头回到顶部案例
    HDU1506: Largest Rectangle in a Histogram(最大子矩阵,好题动态优化左右边界)
    HDU1165: Eddy's research II(递推)
    HDU1158:Employment Planning(线性dp)
    HDU1081:To The Max(最大子矩阵,线性DP)
  • 原文地址:https://www.cnblogs.com/zuoxiaobing/p/3548237.html
Copyright © 2011-2022 走看看