瀑布流

结构层

<section class="box">
            <figure>
                <img src="image/1.jpg" />
            </figure>
            <figure>
                <img src="image/image11.png" />
            </figure>
            <figure>
                <img src="image/3.jpg" />
            </figure>
            <figure>
                <img src="image/image10.png" />
            </figure>
            <figure>
                <img src="image/5.jpg" />
            </figure>
            <figure>
                <img src="image/image9.png" />
            </figure>
</section>

表现层

       <style>
         *{margin: 0;padding: 0;}
         img{width:300px;display: block;}
          figure{display: block;float:left;}
        </style>

行为层

$(document).ready(function(){
    $(window).ready(function(){
       imgLocation();
    });
});

function  imgLocation(){
    var box =$("figure");
    var boxWidth  = box.eq(0).width(); //得到元素的宽度
    var windowWidth = $(window).innerWidth(); //屏幕的宽度
    var num = Math.floor(windowWidth /boxWidth );//每行几个图片
    var boxArry =[]; //用来存储高度
    box.each(function(index,value){
        var boxHeight = box.eq(index).height();
        if(index<num  ){
            boxArry[index]=boxHeight; //将盒子高度数值存入数组  
        }else{
           var minboxHeight= Math.min.apply(null,boxArry);
           var minboxIndex = $.inArray(minboxHeight,boxArry)//最下高度盒子所在的位置
           $(value).css({
               "position":"absolute",
               "top": minboxHeight  ,
               "left": box.eq(minboxIndex).position().left   
           });
           boxArry[minboxIndex]+=box.eq(minboxIndex).height();//变化最小值得高度
        } 
    })

}

再做一个图片加载的效果

function imgLoad(){
    var box=$("figure");
    var lastboxHeight = box.last().get(0).offsetTop + Math.floor( box.last().height()/2   ); //获取最后一列的长度
    var documentHeight = $(document).width();
    var scrollHeight = $(document).scrollTop();
    return( lastboxHeight < documentHeight+ scrollHeight  )?true:false;
}

该变开始的代码

$(document).ready(function  () {
    $(window).on("load",function  () {
        imgLocation();
        var dataimg={ "data" :[{"src":"photo1.png"},{"src":"image11.png"} ] }
        window.onscroll =function  () {
            if ( scrollSlide()  ) {
                $.each(dataimg.data, function(index,value) {    
                    var box = $("figure").appendTo( $(".box")  );
                    //console.log( "img/" + $(value).attr("src")  ); 打印出具体的图片对象
                    $("<img />").attr("src","image/" + $(value).attr("src")  ).appendTo(box);
                });
                imgLocation();
            }
        }
    })
});

---

对于本文中用到的方法进行一些说明：

1 Math.floor() 小数值舍入为整数
Math.ceil()、Math.floor() 、Math.round()
Math.ceil()执行向上舍入，即它总是将数值向上舍入为最接近的整数；
Math.floor()执行向下舍入，即它总是将数值向下舍入为最接近的整数；
Math.round()执行标准舍入，即它总是将数值四舍五入为最接近的整数(这也是我们在数学课上学到的舍入规则)

2 Math.min()
此方法返回指定数字中较小的一个。
注:如果没有参数，则返回Infinity。如果有某个参数为NaN，或是不能转换成数字的非数字值，则返回NaN。

console.log(Math.min(NaN,5));//输出结果:NaN。

console.log(Math.min(4,5));//输出结果:4。

本文中在使用Math.min时，是对一个数组，寻找其中的最小值得时候。

    var minboxHeight = Math.min.apply(null , boxArry);

注意，如果你这么写

var a=[2,6,7];
console.log(Math.min(a) ) // 输出结果:NaN。
console.log(Math.min.apply(null, a)) //输出为2

*此时可以看出，apply将数组扁平化了。
对于可变参数函数，当参数个数和参数值在运行期才能确定时，通过将值放入数组，通过 apply 来间接调用是个很有用的方法。
比如，要求最小值的一组数，它们的个数以及具体数值，在写代码时无从知晓，它们是代码跑起来之后动态生成的，这时候就无法在写代码时直接调用 min 函数，这时候 apply 就派上用场了。*
以上是经过向以为大神请教后得知的，在此非常感谢。
参考网址：http://www.cnblogs.com/Liok3187/p/4602386.html

3 inArray

var minboxIndex = $.inArray(minboxHeight,boxArry); //返回符合数值的位置  图片高度最小的那一个

jquery inarray()函数详解
jquery.inarray(value,Array)
确定第一个参数在数组中的位置(如果没有找到则返回 -1 )。

4 each()

box.each(function(index,value){
  ......
})

遍历每一个box，你可以试试

console.log(index + "content is" + value )

看看可以得出什么东西

---

第二种方法做瀑布流(有点假)

---

结构层

<div id="container">



    <ul class="col">
        <li><img src="img/1.jpg" alt=""/></li>
        <li><img src="img/0.jpg" alt=""/></li>
        <li><img src="img/3.jpg" alt=""/></li>
        <li><img src="img/1.jpg" alt=""/></li>
   </ul>

    <ul class="col"></ul>

    <ul class="col"></ul>

样式

#container{width:940px;margin:50px auto;}
#container ul{width:300px;list-style:none;float:left;margin-right:20px;}
#container ul li{margin-bottom:10px;}
#container ul li img{width:300px;}

行为层

function loadMeinv(){
        var data = 0;

        for(var i=0;i<9;i++){//每次加载时模拟随机加载图片

            data = parseInt(Math.random()*9);

            var html = "";

            html = '<li><img src = img/'

                    +data+'.jpg></li>';

            $minUl = getMinUl();

            $minUl.append(html); //或者$(html).appendTo( $minUl)

        }

}

loadMeinv();



//寻找
function   getMinUl(){
        var $arrUl = $("#container .col");

        var $minUl =$arrUl.eq(0);

        $arrUl.each(function(index,elem){

            if($(elem).height()<$minUl.height()){

                $minUl = $(elem);

            }

        });

        return $minUl; //高度最小的ul

}


$(window).on("scroll",function(){

        $minUl = getMinUl();

        if($minUl.height() <= $(window).scrollTop()+$(window).height()){

        //当最短的ul的高度比窗口滚出去的高度+浏览器高度大时加载新图片

            loadMeinv();

        }

    })