jQuery实现瀑布流的简单Demo

一、Html布局

    

      

        ![](images.jpg)
      
    
    

      

        ![](mingo.jpg)
      
    
    

      

        ![](ace.jpg)
      
    
    

      

        ![](images.jpg)
      
    
    

      

        ![](mingo.jpg)
      
    
    

      

        ![](ace.jpg)
      
    
    

      

        ![](mingo.jpg)
      
    
    

      

        ![](ace.jpg)
      
    
  

二、Css样式

三、Js部分

$(window).on('load',function(){
    waterfall();
    $(window).on('scroll',function(){
      var dataInt = {"data":[{"src":"images.jpg"},{"src":"ace.jpg"},{"src":"mingo.jpg"}]};
      if(checkScrollSide){
        $.each(dataInt.data,function(key,val){
          var oBox = $('
').addClass('box').appendTo($('#main'));
          var oPic = $('
').addClass('pic').appendTo($(oBox));
          $('').attr("src",$(val).attr('src')).appendTo($(oPic));
        })
        waterfall();
      }
    })
  })
  function waterfall(){
    var $boxs = $("#main>div");//找到main下面的图片盒子
    var w = $boxs.eq(0).outerWidth();//图片盒子宽
    var cols = Math.floor($(window).width()/w);//列数
    $("main").width(w*cols).css("margin","0 auto");
    var hArr = [];
    $boxs.each(function(index,val) {
      console.log(val)
      var h = $boxs.eq(index).outerHeight();
        if(indexdiv").last();
    var laseBoxDis = $lastBox.offset().top+Math.floor($lastBox.outerHeight()/2);
    var scrollTop = $(window).scrollTop();
    var documentH = $(window).height();
    return (lastBoxDis < scrollTop+documentH)?true:false;
  }