瀑布流的实现

1，页面初始化时，调用插件进行一次排版；
2，当用户将滚动条拖到底部时，用ajax加载一次数据，并排版显示
3，重复2，直到无数据
html代码：
  1     <!DOCTYPE HTML>
  2     <html>
  3     <head>
  4     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5     <title>Insert title here</title>
  6     <!--样式-->
  7     <style type="text/css">
  8     body {margin:40px auto; width:800px; font-size:12px; color:#666;}
  9     .item{
 10         border: 1px solid #D4D4D4;
 11         color: red;
 12         margin: 0 10px 10px 0;
 13         padding: 10px;
 14         position: relative;
 15         width: 200px;
 16     }
 17     .loading-wrap{
 18         bottom: 50px;
 19         width: 100%;
 20         height: 52px;
 21         text-align: center;
 22         display: none;
 23     }
 24     .loading {
 25         padding: 10px 10px 10px 52px;
 26         height: 32px;
 27         line-height: 28px;
 28         color: #FFF;
 29         font-size: 20px;
 30         border-radius: 5px;
 31         background: 10px center rgba(0,0,0,.7);
 32     }
 33     .footer{
 34         border: 2px solid #D4D4D4;
 35     }
 36     </style>
 37     <!--样式-->
 38     </head>
 39     <body>
 40     <!--引入所需要的jquery和插件-->
 41     <script type="text/javascript" src="/test/public/Js/jquery-1.7.2.min.js"></script>
 42     <script type="text/javascript" src="/test/public/Js/jquery.masonry.min.js"></script>
 43     <!--引入所需要的jquery和插件-->
 44     <!--瀑布流-->
 45     <div id="container" class=" container">
 46     <!--这里通过设置每个div不同的高度，来凸显布局的效果-->
 47     <volist name="height" id="vo">
 48         <div class="item" style="height:{$vo}px;">瀑布流下来了</div>
 49     </volist>
 50     </div>
 51     <!--瀑布流-->
 52     <!--加载中-->
 53     <div id="loading" class="loading-wrap">
 54         <span class="loading">加载中，请稍后...</span>
 55     </div>
 56     <!--加载中-->
 57     <!--尾部-->
 58     <div class="footer"><center>我是页脚</center></div>
 59     <!--尾部-->
 60     <script type="text/javascript">
 61     $(function(){
 62         //页面初始化时执行瀑布流
 63         var $container = $('#container');
 64          $container.masonry({
 65             itemSelector : '.item',
 66             isAnimated: true
 67          });
 68          //用户拖动滚动条，达到底部时ajax加载一次数据
 69         var loading = $("#loading").data("on", false);//通过给loading这个div增加属性on，来判断执行一次ajax请求
 70         $(window).scroll(function(){
 71             if(loading.data("on")) return;
 72             if($(document).scrollTop() > $(document).height()-$(window).height()-$('.footer').height()){//页面拖到底部了
 73                 //加载更多数据
 74                 loading.data("on", true).fadeIn();         //在这里将on设为true来阻止继续的ajax请求
 75                 $.get(
 76                     "{:U('Index/getMore')}", 
 77                     function(data){
 78                        //获取到了数据data,后面用JS将数据新增到页面上
 79                         var html = "";
 80                         if($.isArray(data)){
 81                             for(i in data){
 82                                 html += "<div class="item" style="height:"+data[i]+"px;">瀑布又流下来了</div>";
 83                             }
 84                             var $newElems = $(html).css({ opacity: 0 }).appendTo($container);
 85                             $newElems.imagesLoaded(function(){
 86                                 $newElems.animate({ opacity: 1 });
 87                                 $container.masonry( 'appended', $newElems, true ); 
 88                                   });
 89                           //一次请求完成，将on设为false，可以进行下一次的请求
 90                             loading.data("on", false);
 91                         }
 92                         loading.fadeOut();
 93                     },
 94                     "json"
 95                 );
 96             }
 97         });
 98     });
 99     </script>
100     </body>
101     </html>
View Code