jquery瀑布流的制作

首先，还是来看一下炫酷的页面：

今天就边做边说了：

一。准备工作

新建css，js，img文件夹存放相应文件，并在demo.html文件中引入外部文件（注意要把jquery文件引入），这里就不过多描述了。

二。图片展示

<div id="main">
    <div class="pic">
        <img src="img/1.jpg" />
    </div>
    
    <div class="pic">
        <img src="img/2.jpg" />
    </div>
    
    <div class="pic">
        <img src="img/3.jpg" />
    </div>
    
    <div class="pic">
        <img src="img/4.jpg" />
    </div>
    
    <div class="pic">
        <img src="img/5.jpg" />
    </div>
    
    <div class="pic">
        <img src="img/6.jpg" />
    </div>
    
    <div class="pic">
        <img src="img/7.jpg" />
    </div>
    
    <div class="pic">
        <img src="img/8.jpg" />
    </div>
    
    <div class="pic">
        <img src="img/9.jpg" />
    </div>
    
    <div class="pic">
        <img src="img/10.jpg" />
    </div>
    
    <div class="pic">
        <img src="img/1.jpg" />
    </div>
    
    <div class="pic">
        <img src="img/2.jpg" />
    </div>
    
    <div class="pic">
        <img src="img/3.jpg" />
    </div>
    
    <div class="pic">
        <img src="img/4.jpg" />
    </div>
     <div class="pic">
        <img src="img/5.jpg" />
    </div>
    
    <div class="pic">
        <img src="img/6.jpg" />
    </div>
    
    <div class="pic">
        <img src="img/7.jpg" />
    </div>
</div>

一个大div包裹全局，小的div包裹图片，这里为什么要这么多图片呢，是因为刚开始的时候图片要占满屏幕，否则会不美观。而且jq中用的是监听滚动条的方法加载图片，图片太少的话滚动条都不会出现，自然不能执行滚动条的事件。

分析一下图片的显示效果：

1.图片有白色的边框，阴影

2.图片是平铺的

*{
    padding:0;
    margin:0;
}
#main{
    position:relative;
}
#main .pic{
    width:170px;
    box-shadow: 0 0 6px #CCCCCC;
    float:left;
    margin:5px;
}
#main .pic img{
    width:160px;
    height:auto;
    border: 5px #FFFFFF solid;
}

相信上面的代码是很好理解的，到此为止图片已经平铺了。

三。让图片顺序依次排列

虽然执行完上面的代码以后图片是平铺了，但效果却是很不好的，它没有像图片展示的那样高低排列。

如何实现高低排列：

1.第一行肯定是没有问题的，因为第一行的每张图上面没有图片，也就是说是平的；

2.第二行就可以取第一行中高度最小的图片，然后把第二行的第一张图片放在下面（这里用绝对定位控制图片位置）；

3.以此类推，把第二行第一张图片插入以后，在选择这时候第一行中最短的，并把图片放在下面。

function waterFall(){
    var divWidth = $("#main .pic").eq(0).width()+10; //获取页面中包裹图片的div宽度，这里的+10是因为在css中设置的margin是5px,左右加起来就是10（相当于这个div的实际宽度比预设多10px）
    var num = Math.floor($(window).width()/divWidth); // Math.floor是向下取整，获取整个浏览器的宽度除以"图片的占宽"可以获得图片可以排放多少列，这也就是向下取整的原因了
    
    $("#main").css({  //设置整个div的宽度，并让其居中显示
        "width":divWidth*num,
        "margin": "0 auto"    
    });
    var picArr = []; //定义一个数组
    $("#main .pic").each(function(index){ //遍历所有.pic的div
        var picHeight = $("#main .pic").eq(index).height();//获取每个div的高度
        if(index<num){ //如果是第一行
            picArr[index] = picHeight;//把高度存储进数组
        }else{ //如果数组不是第一行的数据了
            var minH = Math.min.apply(null,picArr); //获取数组中最小的高度
            var minIndex = $.inArray(minH,picArr); //获取最小高度的index（位置）
            $(this).css({ //设置这个div的位置
                "position":"absolute",
                "top":minH+10, //设置它距离上方的距离，这里加10是因为在css中设置的margin是5px,上下加起来是10px
                "left":$("#main .pic").eq(minIndex).position().left     //获取最小高度距离左边的距离
            });
            picArr[minIndex]+=$("#main .pic").eq(index).height()+10; //把最小的高度存入数组中
        }
    });
}

在页面加载完后执行waterFall()方法，这个句子就不写啦。到此为止就可以看到图片依次有序排列啦

四。瀑布流的实现

思路：这里是监听浏览器的滚动条，当滚动条到达底部时就加载预定数组中的图片

$(window).on("load",function(){
    waterFall();
    var pics = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"];
    window.onscroll = function(){
        if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
            $.each(pics,function(index,value){
                $(".pic").eq(0).clone().appendTo("#main").find("img").attr("src","img/"+value);    
            });
            waterFall();
        }
    }
});

appendTo() 方法在被选元素的结尾（仍然在内部）插入指定内容。

当然这里是当浏览器的滚动条到达底部的时候才会加载图片，如果觉得这样用户体验不好的话，可以在if里面设置，例如：if ($(document).scrollTop()+100 >= $(document).height() - $(window).height())