特效描述:jquery waterfall 多列瀑布流布局 鼠标滚动 页面图片无限加载。仿蘑菇街的瀑布流效果
代码结构
1. 引入JS
<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/waterfall.js"></script>
2. HTML代码
<ul class="clearfix" id="stage"> <li> <div><a href="http://www.dijiuzhanzhang.com/"><img width="200" height="300" alt="第九站长" src="images/1.jpg" /></a></div> <div><a href="http://www.dijiuzhanzhang.com/"><img width="200" height="624" alt="第九站长" src="images/2.jpg" /></a></div> </li> <li> <div><a href="http://www.dijiuzhanzhang.com/"><img width="200" height="300" alt="第九站长" src="images/4.jpg" /></a></div> <div><a href="http://www.dijiuzhanzhang.com/"><img width="200" height="200" alt="第九站长" src="images/5.jpg" /></a></div> </li> <li> <div><a href="http://www.dijiuzhanzhang.com/"><img width="200" height="696" alt="第九站长" src="images/6.jpg" /></a></div> <div><a href="http://www.dijiuzhanzhang.com/"><img width="200" height="300" alt="第九站长" src="images/7.jpg" /></a></div> </li> <li> <div><a href="http://www.dijiuzhanzhang.com/"><img width="200" height="133" alt="第九站长" src="images/8.jpg" /></a></div> <div><a href="http://www.dijiuzhanzhang.com/"><img width="200" height="300" alt="第九站长" src="images/9.jpg" /></a></div> <div><a href="http://www.dijiuzhanzhang.com/"><img width="200" height="432" alt="第九站长" src="images/3.jpg" /></a></div> </li> </ul>