瀑布流布局，大家帮我看看错哪里了TT html和css没问题的

Question

$(window).on('load',function(){
 waterfall();
 var dataInt={'data':[{'src':'4.jpg'},{'src':'5.jpg'},{'src':'6.jpg'}]};
 $(window).on('scroll',function(){
  if(checkScrollSlide()){
   $.each(dataInt.data,function(index,value){
    var $oPin=$('<div>').addClass('pin').appendTo($('#main'));
    var $oBox=$('<div>').addClass('box').appendTo($oPin);
    $('<img>').attr('src','images/'+$(value).attr('src').appendTo($oBox));
    });
    waterfall();
  };
 })
})
function waterfall(){
 var $aPin=$('#main>div');
 var iPinW=$aPin.eq(0).outerWidth();
 var num=Math.floor($(window).width()/iPinW);
 $('#main').width(iPinW*num).css('margin','0 auto');
 var pinHArr=[];
 $aPin.each(function(index,value){
  var pinH=$aPin.eq(index).outerHeight();
  if(index<num){
   pinHArr[index]=pinH;
  }else{
   var minH=Math.min.apply(null,pinHArr);
   var minHIndex=$.inArray(minH,pinHArr);
   $(value).css({
    "position":"absolute",
    "top":minH+"px",
    "left":minHIndex*iPinW+"px"
    })
   pinHArr[minHIndex]+=$aPin.eq(index).outerHeight()
   }
  })
  }
function checkScrollSlide(){
 var $lastBox=$('#main>div').last();
 var lastBoxDis=$lastBox.offset().top+Math.floor($lastBox.outerHeight()/2);
 var documentH=$(window).height();
 var scrollTop=$(window).scrollTop();
 return(lastBoxDis<documentH+scrollTop)?true:false;
 }

Answer 1

代码太长了，一般没人愿意去看的