jquery下拉会无限加载的瀑布流代码

jquery下拉会无限加载的瀑布流代码。当鼠标向下滚动的时候，图片会不断加载。每次刷新，图片排序都会不同。
1、在头部加入下面的css样式：

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* container */
#container{width:940px;margin:50px auto;}
#container ul{width:300px;list-style:none;float:left;margin-right:20px;}
#container ul li{margin-bottom:20px;}
#container ul li img{width:300px;}
</style>

2、把以下代码拷贝到你想引用的地方

<div id="container">
    <ul class="col">
        <li><img src="img/1.jpg" alt=""/></li>
        <li><img src="img/2.jpg" alt=""/></li>
        <li><img src="img/3.jpg" alt=""/></li>
    </ul>
    <ul class="col"></ul>
    <ul class="col" style="margin-right:0"></ul>    
</div>
<script type="text/javascript" src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
    //url data function dataType
    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><p>src='
                    +data+'.jpg</p></li>';
            $minUl = getMinUl();
            $minUl.append(html);
        }
    }
    loadMeinv();
    $(window).on("scroll",function(){
        $minUl = getMinUl();
        if($minUl.height() <= $(window).scrollTop()+$(window).height()){
        //当最短的ul的高度比窗口滚出去的高度+浏览器高度大时加载新图片
            loadMeinv();
        }
    })
    function getMinUl(){//每次获取最短的ul,将图片放到其后
        var $arrUl = $("#container .col");
        var $minUl =$arrUl.eq(0);
        $arrUl.each(function(index,elem){
            if($(elem).height()<$minUl.height()){
                $minUl = $(elem);
            }
        });
        return $minUl;
    }
})
</script>

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！