jQuery实现的仿堆糖图片自滚动瀑布流效果
1.引用样式文件css/lrtk.css
2.引用jquery的库文件js/jquery.js
3.引用效果的具体js代码文件js/lrtk.js
4.将id为waterfall的DIV的内容复制到您的html文件
5.图片流动速度，停留时间等参数可在lrtk.js里修改
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=gb2312" http-equiv="Content-Type">
<meta name="keywords" content="JS代码,仿堆糖图片自滚动瀑布流效果,JS广告代码,css垂直居中,div垂直居中,JS特效代码" />
<meta name="description" content="此代码内容为仿堆糖图片自滚动瀑布流效果，属于站长常用代码，更多仿堆糖图片自滚动瀑布流效果代码请访问源码搜藏JS代码频道。" />
<link rel=stylesheet type=text/css href="css/lrtk.css">
<script type=text/javascript src="js/jquery.js"></script>
<script type=text/javascript src="js/lrtk.js"></script>
<title>仿堆糖图片自滚动瀑布流效果_源码搜藏</title>
</head>
<body>
<!--代码开始-->
<div id="content">
<div id="waterfall" class="waterfall">
<div class="dym-dl">
<div class="dym"><img src="images/01.jpg" /></div>
<div class="dym"><img src="images/02.jpg" /></div>
<div class="dym"><img src="images/03.jpg" /></div>
<div class="dym"><img src="images/04.jpg" /></div>
<div class="dym"><img src="images/17.jpg" /></div>
</div>
<div class="dym-dl">
<div class="dym"><img src="images/05.jpg" /></div>
<div class="dym"><img src="images/06.jpg" /></div>
<div class="dym"><img src="images/07.jpg" /></div>
<div class="dym"><img src="images/08.jpg" /></div>
</div>
<div class="dym-dl">
<div class="dym"><img src="images/09.jpg" /></div>
<div class="dym"><img src="images/10.jpg" /></div>
<div class="dym"><img src="images/11.jpg" /></div>
<div class="dym"><img src="images/12.jpg" /></div>
</div>
<div class="dym-dl">
<div class="dym"><img src="images/13.jpg" /></div>
<div class="dym"><img src="images/14.jpg" /></div>
<div class="dym"><img src="images/15.jpg" /></div>
<div class="dym"><img src="images/16.jpg" /></div>
</div>
</div>
</div>
<!--代码结束-->
<div style="text-align:center;margin:50px 0; font:normal 12px/2em '微软雅黑'">
<p>来源：<a href="http://www.codesocang.com/" target="_blank">堆糖</a> 代码整理：<a href="http://www.codesocang.com/" target="_blank">源码搜藏</a> 感谢：<a href="http://www.iseedy.com/" target="_blank">爱看电影网</a></p>
<p>＊尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p>
</div>
</body>
</html>
相册代码下载排行
-
2017-07-06
-
2015-09-17
-
2014-04-12
-
2014-10-13
-
2014-06-30
-
2015-02-05
-
2015-02-05
-
2015-02-05
最新文章
-
2017-07-06
-
2015-09-17
-
2015-03-02
-
2015-02-05
-
2015-02-05
-
2015-02-05
-
2015-02-05
-
2015-02-05
热门源码
