首页 > 特效插件 > 其他特效 >  jquery下拉会无限加载的瀑布流代码正文

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

特效介绍
jquery无限加载的瀑布流代码

jquery下拉会无限加载的瀑布流代码。当鼠标向下滚动的时候,图片会不断加载。每次刷新,图片排序都会不同。
使用方法
1、在头部加入下面的css样式:
01<style type="text/css">
02*{margin:0;padding:0;list-style-type:none;}
03a,img{border:0;}
04body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
05/* container */
06#container{width:940px;margin:50px auto;}
07#container ul{width:300px;list-style:none;float:left;margin-right:20px;}
08#container ul li{margin-bottom:20px;}
09#container ul li img{width:300px;}
10</style>
2、把以下代码拷贝到你想引用的地方
01<div id="container">
02    <ul class="col">
03        <li><img src="img/1.jpg" alt=""/></li>
04        <li><img src="img/2.jpg" alt=""/></li>
05        <li><img src="img/3.jpg" alt=""/></li>
06    </ul>
07    <ul class="col"></ul>
08    <ul class="col" style="margin-right:0"></ul>   
09</div>
10<script type="text/javascript" src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>
11<script type="text/javascript">
12$(function(){
13    //url data function dataType
14    function loadMeinv(){
15        var data = 0;
16        for(var i=0;i<9;i++){//每次加载时模拟随机加载图片
17            data = parseInt(Math.random()*9);
18            var html = "";
19            html = '<li><img src = img/'
20                    +data+'.jpg><p>src='
21                    +data+'.jpg</p></li>';
22            $minUl = getMinUl();
23            $minUl.append(html);
24        }
25    }
26    loadMeinv();
27    $(window).on("scroll",function(){
28        $minUl = getMinUl();
29        if($minUl.height() <= $(window).scrollTop()+$(window).height()){
30        //当最短的ul的高度比窗口滚出去的高度+浏览器高度大时加载新图片
31            loadMeinv();
32        }
33    })
34    function getMinUl(){//每次获取最短的ul,将图片放到其后
35        var $arrUl = $("#container .col");
36        var $minUl =$arrUl.eq(0);
37        $arrUl.each(function(index,elem){
38            if($(elem).height()<$minUl.height()){
39                $minUl = $(elem);
40            }
41        });
42        return $minUl;
43    }
44})
45</script>