<style type="text/css">    *{margin:0; padding:0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}    img{max-width: 100%; height: auto;}    #wrap{position: relative; width:90%; margin:0 auto;}    .box{width:25%; float:left; padding: 0 15px 15px 0;}    .pic{padding:10px; border:1px solid #888;}</style>

<div id="wrap">    <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/15.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/10.jpg" alt=""/></div>    </div>    <div class="box">        <div class="pic"><img src="images/18.jpg" alt=""/></div>    </div>    <div class="box">        <div class="pic"><img src="images/11.jpg" alt=""/></div>    </div>    <div class="box">        <div class="pic"><img src="images/12.jpg" alt=""/></div>    </div>    <div class="box">        <div class="pic"><img src="images/13.jpg" alt=""/></div>    </div>    <div class="box">        <div class="pic"><img src="images/14.jpg" alt=""/></div>    </div>    <div class="box">        <div class="pic"><img src="images/16.jpg" alt=""/></div>    </div>    <div class="box">        <div class="pic"><img src="images/17.jpg" alt=""/></div>    </div>    <div class="box">        <div class="pic"><img src="images/18.jpg" alt=""/></div>    </div>    <div class="box">        <div class="pic"><img src="images/19.jpg" alt=""/></div>    </div>    <div class="box">        <div class="pic"><img src="images/20.jpg" alt=""/></div>    </div></div>

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script><script>    /*    *  瀑布流 等宽不等高布局    */    var waterFall = function() {        var $wrap = $("#wrap"),            $list = $("#wrap>div"),            w = $list.eq(0).outerWidth(), //获取第一个元素宽度也就是所有子元素的宽度            cols = Math.round($("#wrap").width()/w); //计算每行有几列        var hArr = []; //数组用来存储每列相加的高度        var wrapH = 0; //定义最外层box高度        $list.each(function(index, value) {            var h = $list.eq(index).outerHeight(); //获取遍历的每个元素的高度            var minH, minHIndex;            if(index < cols) {   //循环所有子元素，如果索引小于每列数，那这些元素应该是在第一行.                hArr[index] = h;            }else {                minH = Math.min.apply(null, hArr);  //计算hArr数组中最小高度Math.min.apply(null, Array)方法                minHIndex = $.inArray(minH, hArr);  //计算hArr数组中最小高度的索引值$.inArray()方法                $(value).css({                    ‘position‘: ‘absolute‘,                    ‘top‘: minH + ‘px‘,                    ‘left‘: minHIndex*w + ‘px‘                })                hArr[minHIndex] += h; //将原最小高度加上 在下面新增的box高度            }            var height = minH + h;            if(height > wrapH) {                wrapH = height;            }        })        $("#wrap").height(wrapH);  //给最外层box设置高度    }    var checkScrollSide = function() {        var $lastEle = $list.last(),            lastEleTop = $lastEle.offset().top + $lastEle.height()/2;        var scrollH = $(window).scrollTop();        var windowH = $(document).height();        return (lastEleTop < scrollH + windowH) ? true : false;    }    //页面加载完成有两种事件，一是ready，表示文档结构已经加载完成(不包含图片等非文字文件)，二是onload，表示页面包含图片等文件在内的所有元素加载完成。    $(window).on("load", function() {  //第一次页面加载如果图片下载速度过慢，使得图片高度无法获取到，元素高度计算会错误，图片出现重叠问题，所以需要等到load事件        waterFall();        var dataList = {‘data‘:[{‘src‘:‘15.jpg‘},{‘src‘:‘1.jpg‘},{‘src‘:‘18.jpg‘},{‘src‘:‘10.jpg‘}]};        $(window).scroll(function() {            if(checkScrollSide) {  //判断最后一个元素高度是否显示过半。                $.each(dataList.data, function(index, value) {                    var $oEle = $("<div>").addClass("box").appendTo($("#wrap")),                        $oPic = $("<div>").addClass("pic").appendTo($oEle),                        $oImg = $(‘<img>‘).attr("src", "images/" + $(value).attr("src")).appendTo($oPic);                })                waterFall();            }        })    })</script>