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