<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>天道酬勤-瀑布流案例</title>
<meta name="keywords" content="电子商务，SEO，运营推广，PHP，Linux，Myql，用户体验，前端技术，Html5，Css3" />
<meta name="description" content="天道酬勤-关注最新前沿IT技术，专注PHP技术、web开发、网站运营和用户体验.." />
<link rel="stylesheet" href="css/style.css" media="all" />
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/pbl.js"></script>
</head>
<body class="home blog">
<div id="container">
<div class="cell"><img src="http://cued.xunlei.com/demos/publ/img/P_000.jpg" /><p>00</p></div>
<div class="cell"><img src="http://cued.xunlei.com/demos/publ/img/P_001.jpg" /><p>01</p></div>
<div class="cell"><img src="http://cued.xunlei.com/demos/publ/img/P_002.jpg" /><p>02</p></div>
<div class="cell"><img src="http://cued.xunlei.com/demos/publ/img/P_003.jpg" /><p>03</p></div>
<div class="cell"><img src="http://cued.xunlei.com/demos/publ/img/P_004.jpg" /><p>04</p></div>
<div class="cell"><img src="http://cued.xunlei.com/demos/publ/img/P_005.jpg" /><p>05</p></div>
<div class="cell"><img src="http://cued.xunlei.com/demos/publ/img/P_006.jpg" /><p>06</p></div>
<div class="cell"><img src="http://cued.xunlei.com/demos/publ/img/P_007.jpg" /><p>07</p></div>
<div class="cell"><img src="http://cued.xunlei.com/demos/publ/img/P_008.jpg" /><p>08</p></div>
<div class="cell"><img src="http://cued.xunlei.com/demos/publ/img/P_009.jpg" /><p>09</p></div>
<div class="cell"><img src="http://cued.xunlei.com/demos/publ/img/P_010.jpg" /><p>10</p></div>
<div class="cell"><img src="http://cued.xunlei.com/demos/publ/img/P_011.jpg" /><p>11</p></div>
<div class="cell"><img src="http://cued.xunlei.com/demos/publ/img/P_012.jpg" /><p>12</p></div>
<div class="cell"><img src="http://cued.xunlei.com/demos/publ/img/P_013.jpg" /><p>13</p></div>
<div class="cell"><img src="http://cued.xunlei.com/demos/publ/img/P_014.jpg" /><p>14</p></div>
<div class="cell"><img src="http://cued.xunlei.com/demos/publ/img/P_015.jpg" /><p>15</p></div>
<div class="cell"><img src="http://cued.xunlei.com/demos/publ/img/P_016.jpg" /><p>16</p></div>
<div class="cell"><img src="http://cued.xunlei.com/demos/publ/img/P_017.jpg" /><p>17</p></div>
<div class="cell"><img src="http://cued.xunlei.com/demos/publ/img/P_018.jpg" /><p>18</p></div>
<div class="cell"><img src="http://cued.xunlei.com/demos/publ/img/P_019.jpg" /><p>19</p></div>
</div>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-27111967-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script>
var opt={
getResource:function(index,render){//index为已加载次数,render为渲染接口函数,接受一个dom集合或jquery对象作为参数。通过ajax等异步方法得到的数据可以传入该接口进行渲染，如 render(elem)
if(index>=7) index=index%7+1;
var html='';
for(var i=20*(index-1);i<20*(index-1)+20;i++){
var k='';
for(var ii=0;ii<3-i.toString().length;ii++){
k+='0';
}
k+=i;
var src="http://cued.xunlei.com/demos/publ/img/P_"+k+".jpg";
html+='<div class="cell"><a href=http://www.baidu.com target=_blank><img src="'+src+'" /><p>'+k+'</p></a></div>';
}
return $(html);
},
auto_imgHeight:true,
insert_type:1
}
$('#container').waterfall(opt);
</script>
</body>
</html>
js瀑布流，无限加载，自动适应宽度
5星 · 超过95%的资源 需积分: 50 80 浏览量
2013-03-23
14:27:34
上传
评论
收藏 38KB ZIP 举报 
JS瀑布流效果+滑动加载（精）.zip （4个子文件） 
JS瀑布流效果+滑动加载（精） 
index.html 4KB js 
pbl.js 7KB jquery-1.7.2.min.js 93KB css style.css 703B
koumenglin
- 粉丝: 4
- 资源: 44
- 1
- 2
- 3
前往页