主页 > 编程资料 > Javascript >
发布时间:2015-01-19 作者:网络 阅读:208次
主要功能代码如下:
01 <script type="text/javascript">  
02     var flag = true;
03     $(function(){          
04         var $container = $('#listing');   
05         $container.masonry({
06             singleMode: true,
07             animate: true,
08             itemSelector: '.post'
09         });    
10         //滚动条滚动到离底部距离50的时候触发
11         $(window).scroll(function(){
12             // 当滚动到最底部以上100像素时, 加载新内容
13             if ($(document).height() - $(this).scrollTop() - $(this).height()<50){  
14                 if (flag){
15                     var $boxes = $(getList());  
16                     $container.append($boxes).masonry('appended',$boxes);
17                 }
18             }
19         });
20     });
21     //测试获取列表
22     function getList() {   
23         var boxes = [],count = parseInt(Math.random()*10);
24         for (var i=0; i < count; i++ ) {
25             boxes.push('<div class="post"><a href="#"><img src="images/'+(i+1)+'.jpg" width="280" alt="" /></a><a href="#" target="_blank">图片'+(i+1)+'</a></div>');
26         }
27         //把数组转成字符串
28         return boxes.join("");
29     };
30 </script>
 
 
 
效果如下:
关键字词: