jQuery实现瀑布流的简单Demo

一、Html布局

<div id="main">
    <div class="box">
      <div class="pic">
        ![](images.jpg)
      </div>
    </div>
    <div class="box">
      <div class="pic">
        ![](mingo.jpg)
      </div>
    </div>
    <div class="box">
      <div class="pic">
        ![](ace.jpg)
      </div>
    </div>
    <div class="box">
      <div class="pic">
        ![](images.jpg)
      </div>
    </div>
    <div class="box">
      <div class="pic">
        ![](mingo.jpg)
      </div>
    </div>
    <div class="box">
      <div class="pic">
        ![](ace.jpg)
      </div>
    </div>
    <div class="box">
      <div class="pic">
        ![](mingo.jpg)
      </div>
    </div>
    <div class="box">
      <div class="pic">
        ![](ace.jpg)
      </div>
    </div>
  </div>

二、Css样式

<style>
  *{
    margin:0;
    padding: 0;
  }
  #main{
    position: relative;
  }
  .box{
    padding: 15px 0 0 15px;
    float: left;
  }
  .pic{
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow:0 0 5px #ccc;
  }
  .pic img{
    width: 320px;
    height: auto;
  }
</style>

三、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 = $('<div>').addClass('box').appendTo($('#main'));
          var oPic = $('<div>').addClass('pic').appendTo($(oBox));
          $('<img>').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(index<cols){
          hArr[index] = h;
        }else{
          var minH = Math.min.apply(null,hArr);
          var minHIndex = $.inArray(minH,hArr);//获取高度最低的图片盒子的索引值
          $value = $(val);//将Dom对象转成jQuery对象
          $value.css({
            'position':'absolute',
            'top':minH+'px',
            'left':minHIndex*w + 'px'
          })
          hArr[minHIndex] += $boxs.eq(index).outerHeight();
        }
    });
  }
  function checkScrollSide(){
    var $lastBox = $("#main>div").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;
  }