日期:2014-05-16  浏览次数:20453 次

求解读关于瀑布流加载的JS代码问题?
<script>
 
;(function($){
   var 
   //参数
   setting={
      column_width:238,//列宽
  column_className:'waterfall_column',//列的类名
  column_space:10,//列间距
  cell_selector:'.cell',//要排列的砖块的选择器,context为整个外部容器
  img_selector:'img',//要加载的图片的选择器
  auto_imgHeight:true,//是否需要自动计算图片的高度
  fadein:true,//是否渐显载入
  fadein_speed:600,//渐显速率,单位毫秒
  insert_type:1, //单元格插入方式,1为插入最短那列,2为按序轮流插入
  getResource:function(index){ }  //获取动态资源函数,必须返回一个砖块元素集合,传入参数为加载的次数
   },
   //
   waterfall=$.waterfall={},//对外信息对象
   $container=null;//容器
   waterfall.load_index=0, //加载次数
   $.fn.extend({
       waterfall:function(opt){
  opt=opt||{};  
      setting=$.extend(setting,opt);
  $container=waterfall.$container=$(this);
  waterfall.$columns=creatColumn();
  render($(this).find(setting.cell_selector).detach(),false); //重排已存在元素时强制不渐显
  waterfall._scrollTimer2=null;
  $(window).bind('scroll',function(){
     clearTimeout(waterfall._scrollTimer2);
 waterfall._scrollTimer2=setTimeout(onScroll,300);
  });
  waterfall._scrollTimer3=null;
  $(window).bind('resize',function(){
     clearTimeout(waterfall._scrollTimer3);
 waterfall._scrollTimer3=setTimeout(onResize,300);
  });
   }
   });
   function creatColumn(){//创建列
      waterfall.column_num=calculateColumns();//列数
  //循环创建列
  var html='';
  for(var i=0;i<waterfall.column_num;i++){
     html+='<div class="'+setting.column_className+'" style="width:'+setting.column_width+'px; display:inline-block; *display:inline;zoom:1; margin-left:'+setting.column_space/2+'px;margin-right:'+setting.column_space/2+'px; vertical-align:top; overflow:hidden"></div>';
  }
   
  $container.prepend(html);//插入列
  return $('.'+setting.column_className,$container);//列集合
   }
   function calculateColumns(){//计算需要的列数
      var num=Math.floor(($container.innerWidth())/(setting.column_width+setting.column_space));
  if(num<1){ num=1; } //保证至少有一列
  return num;
   }
   function render(elements,fadein){//渲染元素
 
      if(!$(elements).length) return;//没有元素
      var $columns = waterfall.$columns;
      $(elements).each(function(i){
          
  if(!setting.auto_imgHeight||setting.insert_type==2){//如果给出了图片高度,或者是按顺序插入,则不必等图片加载完就能计算列的高度了
     if(setting.insert_type==1){ 
    insert($(elements).eq(i),setting.fadein&&fadein);//插入元素
 }else if(setting.insert_type==2){
    insert2($(elements).eq(i),i,setti