我爱模板网 > 特效插件 > 其他特效 >  jquery下拉会无限加载的瀑布流代码正文

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

特效介绍
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>


部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!
上一篇:js运行代码插件 下一篇:简单实用的jquery返回顶部插件
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢