1 <div id="container">
 2             <div class="box">
 3                 <div class="content">
 4                     <img src="../img/1.jpg">
 5                 </div>
 6             </div>
 7             <div class="box">
 8                 <div class="content">
 9                     <img src="../img/9.jpg">
10                 </div>
11             </div>
12             <div class="box">
13                 <div class="content">
14                     <img src="../img/11.jpg">
15                 </div>
16             </div>
17             <div class="box">
18                 <div class="content">
19                     <img src="../img/12.jpg">
20                 </div>
21             </div>
22 <-- class为box可以多复制几个-->
23                         </div>

1 <style>
2             *{padding:0;margin:0;}
3             .box{position:relative;float:left;/*position:absolute*/}
4             .content{padding:10px;border:1px solid #ccc;box-shadow: 0 0  5px #ccc;
5             border-radius: 5px;}
6             img{width:190px;height:auto;}
7         </style>

<script>$(function(){//监听window事件来获取图片加载的位置$(window).on("load",function(){imgLoction();var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};window.onscroll=function(){if(checkscrollside()){$.each( dataInt.data, function( index, value ){var $oPin = $('<div>').addClass('box').appendTo( $( "#container" ) );var $oBox = $('<div>').addClass('content').appendTo( $oPin );$('<img>').attr('src','./img/' + $( value).attr( 'src') ).appendTo($oBox);});imgLoction();};}})})function checkscrollside(){var $aPin = $( ".box" );var lastPinH = $aPin.last().get(0).offsetTop + Math.floor($aPin.last().height()/2);//创建【触发添加块框函数waterfall()】的高度：最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载)var scrollTop = $( window ).scrollTop()//注意解决兼容性var documentH = $( document ).width();//页面高度return (lastPinH < scrollTop + documentH ) ? true : false;//到达指定高度后 返回true，触发waterfall()函数
            }function imgLoction(){//首先创建一个盒子对象，对应的就是index文件当中的box元素var box=$(".box");//获取盒子的宽度==第一个盒子的宽度var boxwidth=box.eq(0).width();//获取盒子宽度后看一排能摆放多少个//一排的个数等于当前浏览器窗口的宽度除以每个盒子的宽度,注意除以得到的数是小数，要将其转化为整数var num=Math.floor($(window).width()/boxwidth);//定义一个数组来承载储存列中所有盒子的高度,然后获取一排盒子中高度最小的那个var boxArr=[];//遍历box之后获取每个盒子的高度box.each(function(index,value){//这里的value是盒子对象//console.log(index);//创建一个盒子的高度,用来获取每个盒子的高度var boxheight=box.eq(index).height();//然后 判断：储存第一排中每一个图片的高度，放在数组中储存它if(index<num){boxArr[index]=boxheight;//console.log(boxheight);}else{//获取到高度之后，第二排开始摆放，首先获取到图片最小的一个高度var minboxheight=Math.min.apply(null,boxArr);//console.log(minboxheight);//设置图片的位置，获取第一排中最小图片存放的位置var boxminindex=$.inArray(minboxheight,boxArr);//console.log(boxminindex);//接下来通过位置进行摆放//console.log(value);//获取对象
                        $(value).css({"position":"absolute","top":minboxheight,"left":box.eq(boxminindex).position().left})//然后还要记一个图片摆放的高度boxArr[boxminindex]+=box.eq(index).height();}})}</script>