JQ瀑布流

;(function($){
   $.fn.picComplete = function(time,fn){
      var that = this;
      var timer = setInterval(function(){
         var imgCount = that.length;
         var hCount = 0;
         that.each(function(i,obj){
            if($(obj).height() != 0){
               hCount++;
            }
         });
         if(hCount == imgCount){
            clearInterval(timer);
            fn(that);
         }
      },time);
      return this;
   }
})(jQuery);

////////////////////////////////

$(function(){
   getData();
   $(window).scroll(function(){
      if($(window).scrollTop() + $(window).height() >= $(document).height()){
         getData();
      }
   });

   $(window).resize(function(){
      waterfall();
   });


   function waterfall(){
      var col = parseInt($("#container").width() / (236 + 12));

      var centerLeft = ($(window).width() - (248 * col - 12)) / 2;
      $("#container").css("left",centerLeft);

      var chArr = [];

      $("li").picComplete(50,function(elements){
         elements.each(function(i,obj){
            if((i+1) > col){
               var minHeight = Math.min.apply(null,chArr);
               var minIndex = chArr.indexOf(minHeight);
               $(obj).stop().animate({left:minIndex*248,top:minHeight + 12},400);
               chArr[minIndex] += $(obj).height() + 12;
            }
            else{
               $(obj).stop().animate({left:i*248,top:12},400);
               chArr.push($(obj).height() + 12);
            }
         });
      });
   }

   function getData(){
      $.get("data.json",function(data){
         $.each(data,function(i,obj){
            $("<li><img src=\"img/"+obj.img+"\"></li>").appendTo("ul");
         });
         waterfall();
      });
   }
});