瀑布流加载数据

Jscript代码 

1. <script type="text/javascript">  
2.     (function() {  
3.         var pageNo = 2 , PageCount = 3 , toLoad = true;  
4.         window.onload = window.onscroll = function() {  
5.             var ot = document.body.scrollTop?document.body.scrollTop:document.documentElement.scrollTop,  
6.             ch = document.body.clientHeight,  
7.             och = document.documentElement.clientHeight,  
8.             preCondition = 100;  
9.             flag = ot > ch - och - preCondition;  
10.             if (flag && (pageNo <= PageCount) && toLoad) {  
11.                 toLoad = false;  
12.                 var loading = document.getElementById('loadding');  
13.                 loading.style.display = 'block';  
14. //              var timer = window.setInterval(function(){  
15. //              window.clearInterval(timer);  
16.                 $.getJSON('action/do_post.jsp?callback=?', {method: "update",pageNo:pageNo}, function(data) {  
17.                     pageNo = data.PageNo + 1;  
18.                     PageCount = data.PageCount;  
19.                     var msg = data.msg;  
20.                     switch (msg) {  
21.                         case "success":  
22.                             var _html = '';  
23.                             for (var i = 0; i < data.posts.length; i++) {  
24.                                 var voteId = data.posts[i].voteId;  
25.                                 _html += "<li>";  
26.                                 _html += "<p>" + data.posts[i].content + "</p>";  
27.                                 _html += "<i class='vote-counter-'+"+voteId+">" + ${voteService.getCounter(212)}+"</i>";  
28.                                 _html += "</li>";  
29.                             };  
30.                             $('#ulList').html($('#ulList').html() + _html);  
31.                             break;  
32.                         case "offline":  
33.                             alert("活动下线，谢谢参与");  
34.                             break;  
35.                         case "exist":  
36.                             alert("重复提交");  
37.                             break;  
38.                         default:  
39.                             alert(msg);  
40.                             break;  
41.                     };  
42.                     toLoad = true;  
43.                 });  
44. //              },1000);  
45.             }  
46.         }  
47.     })()  
48.   
49.     /* 后台以分页的形式反馈json数据 
50.     *  toLoad：请求的数据加载完才执行下次请求(数据的加载会触发 window.onscroll 方法) 
51.     *  ot：解决各浏览器的兼容性(是否遵循W3C所制定的DTD规格) 
52.     *  flag：滚动条下拉的值大于某个值时执行 
53.     *  注释的部分为设置加载数据的时间间隔 
54.     *  getCounter(212) js 和 el 表达式不能互传数据 
55.     */  
56. </script>