jQuery实现瀑布流的取巧做法分享

分析：瀑布流，做法有2种

（1）绝对定位方案：每个单元格设置为绝对定位，通过计算，分别设置 top , left 即可实现

（2）浮动方案：弄N列布局（浮动），然后图片数据，按顺序依次插入，如N为3列 ，第一张图片插入到第一列，第二张图片插入到第二列，第三张图片插入到第三列，第四张图片插入到第一列........这样循环插入（不能自适应）

CSS与HTML代码：

代码如下:
　　body,ul,li{margin:0;margin:0;}
    ul{list-style:none;}
    .clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both; height:0;}.clearfix{*zoom:1}
    /*瀑布流*/
    .wallList{width:860px;}
    .wallList li{float:left;display:inline;margin-right:16px;}
    .wallList li a{background:#eee;border:1px solid #ccc;padding:5px 5px 0 5px;display:block;margin-bottom:10px;}
    .wallList li a:hover{border-color:#f60;}
    .wallList li .name{display:block;text-align:center;padding:8px 0;}
    .loadTips{text-align:center;padding:15px 0;}

代码如下:
<div class="wallList" id="wallList">
        <ul class="clearfix">
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <p class="loadTips" id="loadTips"><span>正在加载......</span></p>
</div>

使用jQuery实现，大概思路如下：

　　（1）获取N列中 最小的高度值，JS提供的API是Math.min()，但这个API最多只能传入 2 个参数，所以就需要用aplly来扩展，Math.min.apply(null,[xxx,xxx,xxxx,xxxx])
　　（2）给 window 绑定 scroll事件，下拉的时候获取 $(document).scrollTop() ， 当 $(document).scrollTop() 大于 最小的高度值，就ajax请求url，如果有数据，就往页面插入HTML结构，没有则提示 “加载完”，然后window解绑此事件

代码如下:
// 数据格式
    var testJson = {
        "status":1,
        "data":[
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x300/B5E61D/fff","width":240,"height":300,"name":"图片1"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x210/333/fff","width":240,"height":210,"name":"图片2"},