瀑布流

结构层

<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();        }    })