<div id="main">          <div class="box">              <div class="pic">                  <img src="images/0.jpg" alt="">              </div>          </div>          <div class="box">              <div class="pic">                  <img src="images/1.jpg" alt="">              </div>          </div>          <div class="box">              <div class="pic">                  <img src="images/2.jpg" alt="">              </div>          </div>          <div class="box">              <div class="pic">                  <img src="images/3.jpg" alt="">              </div>          </div>          <div class="box">              <div class="pic">                  <img src="images/4.jpg" alt="">              </div>          </div>          <div class="box">              <div class="pic">                  <img src="images/2.jpg" alt="">              </div>          </div>  </div>

 * {      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: 0px 0px 5px #ccc;      img {          width:165px;          height:auto;      }  }

 $(window).on("load",function () {      waterfall();      var dataInt = { "data":[{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src":"6.jpg"}]}      //模拟json数据;      $(window).on("scroll",function () {          if(checkScrollSlide){              $.each(dataInt.data,function (key,value) {                  var oBox=$("<div>").addClass("box").appendTo($("#main"));                  //jQuery支持连缀,隐式迭代;                  var oPic=$("<div>").addClass('pic').appendTo($(oBox));                  $("<img>").attr("src","images/"+$(value).attr("src")).appendTo(oPic);              });              waterfall();          }      })  });  //流式布局主函数;  function waterfall () {      var $boxs=$("#main>div");      //获取#main元素下的直接子元素div.box;      //获取每一列的宽度;      var w=$boxs.eq(0).outerWidth();      //outerWidth()获取包含padding和border在内的宽度;      //var w=$boxs.eq(0).width();      //width()只能获取给元素定义的宽度;      var cols=Math.floor($(window).width()/w);      //获取多少列;      $("#main").width(w*cols).css("margin","0 auto");      //设置#main元素的宽度和居中样式;      var hArr=[];      //每一列高度的集合;      $boxs.each(function (index,value) {      //遍历每一个box元素;      //为了找到之前所有元素的最低点,然后将本元素设置到最低点之下;          var h=$boxs.eq(index).outerHeight();          //每一个box元素的高,          if (index<cols) {              hArr[index]=h;              //确定每列第一个元素的高度;          } else{              var minH=Math.min.apply(null,hArr);              //得出列高数组中的最小高度;              var minHIndex=$.inArray(minH,hArr);              //$.inArray()方法得出元素(minH)在数组(hArr)中的index值;              //console.log(value);              //此时的value是第一行之后的所有的box元素的DOM对象!;              $(value).css({              //$(value):将DOM对象转换成jQuery对象,才能继续使用jQuery方法;                  "position":"absolute",                  "top":minH+"px",                  "left":minHIndex*w+"px"              });              hArr[minHIndex]+=$boxs.eq(index).outerHeight();              //最低高元素的高度+刚添加到最低高度下的元素的高度=新的列高;          };      });      // console.log(hArr);  };  function checkScrollSlide () {      var $lastBox=$("#main>div").last();      var lastBoxDis=$lastBox.offset().top+Math.floor($lastBox.outerHeight()/2);      var scrollTop=$(window).scrollTop();      var documentH=$(window).height();      return (lastBoxDis<scrollTop+documentH)?true:false;  }