jQuery实现列表内容的动态载入特效

这里给大家分享的是使用jQuery实现列表内容的动态载入的特效，效果相当棒，后面附上瀑布流的实现思路和关键代码，有需要的小伙伴可以参考下。

采用Jquery实现的列表数据动态更新效果，更新的数据可以是ajax请求的数据。

CSS:

1. .main { 
2. width: 100%; 
3. margin-top: 100px; 
4. text-align: center; 
5. font-size: 12.5px; 
6. } 
7.  
8. th, td { 
9. border: 1px solid #ccc; 
10. line-height: 40px; 
11. padding-left: 5px; 
12. } 
13. .item:hover { 
14. background-color: #efefef; 
15. } 
16. .item:nth-child(2n) { 
17. background-color: #efefef; 
18. } 
19. .ListView { 
20. width: 600px; 
21. overflow: hidden; 
22. margin: 0 auto; 
23. padding: 10px; 
24. height:372px; 
25. border: 1px solid #dddddd; 
26. } 
27. .ListView .c { 
28. width: 1200px; 
29. margin: 0 auto; 
30. border-collapse: collapse; 
31. } 
32. .Item { 
33. border-bottom: 1px dashed #dddddd; 
34. padding: 10px 0 10px 0; 
35. overflow: hidden; 
36. margin-left:600px; 
37. } 
38. .Item span { 
39. float: left; 
40. text-align: left; 
41. } 
42. .Item span:first-child { 
43. color: #6AA8E8; 
44. } 
45. .Item span:last-child { 
46. text-align: center; 
47. } 

HTML

1. <div class="main"> 
2. <div class="ListView"> 
3. <div class="c"> 
4. <div class="Item"> <span>test</span> <span>男/0</span> <span>四川省，成都市，锦江区</span> <span>详细说明</span> </div> 
5. <div class="Item"> <span>test</span> <span>男/0</span> <span>四川省，成都市，锦江区</span> <span>详细说明</span> </div> 
6. <div class="Item"> <span>test</span> <span>男/0</span> <span>四川省，成都市，锦江区</span> <span>详细说明</span> </div> 
7. <div class="Item"> <span>test</span> <span>男/0</span> <span>四川省，成都市，锦江区</span> <span>详细说明</span> </div> 
8. <div class="Item"> <span>test</span> <span>男/0</span> <span>四川省，成都市，锦江区</span> <span>详细说明</span> </div> 
9. <div class="Item"> <span>test</span> <span>男/0</span> <span>四川省，成都市，锦江区</span> <span>详细说明</span> </div> 
10. <div class="Item"> <span>test</span> <span>男/0</span> <span>四川省，成都市，锦江区</span> <span>详细说明</span> </div> 
11. <div class="Item"> <span>test</span> <span>男/0</span> <span>四川省，成都市，锦江区</span> <span>详细说明</span> </div> 
12. <div class="Item"> <span>test</span> <span>男/0</span> <span>四川省，成都市，锦江区</span> <span>详细说明</span> </div> 
13. <div class="Item"> <span>test</span> <span>男/0</span> <span>四川省，成都市，锦江区</span> <span>详细说明</span> </div> 
14. </div> 
15. </div> 
16. </div> 
17. <p style="text-align:center;"><a href="javascript:void(0);" onClick="ListView.Update();">刷新数据</a></p> 

JS

1. <script type="text/javascript" src="/js/jquery-1.8.0.min.js"></script> 
2. <script type="text/javascript"> 
3. $(function(){ 
4. ListView.Init(); 
5. }); 
6. var ListView={ 
7. Init:function(){ 
8. $(".Item span").css("width",$(".ListView").width()/4+"px"); 
9. for(var i=0;i<$(".Item").length;i++){ 
10. var target=$(".Item")[i]; 
11. $(target).animate({marginLeft:"0px"},300+i*100); 
12. } 
13. }, 
14. Update:function(){ 
15. $(".ListView .c .Item").remove(); 
16. for(var i=0;i<10;i++){ 
17. var newItem=$("<div class=/"Item/"> <span>test</span> <span>男/"+i+"</span> <span>四川省，成都市，锦江区</span> <span>详细说明</span> </div>"); 
18. $(newItem).find("span").css("width",$(".ListView").width()/4+"px"); 
19. $(".ListView .c").append(newItem); 
20. $(newItem).animate({marginLeft:"0px"},300+i*100); 
21. } 
22. } 
23. } 
24. </script> 

效果是不是非常棒呢，接下来我们再来看看瀑布流的实现思路和js控制动态加载的代码

下面的代码主要是控制滚动条下拉时的加载事件的

在下面代码说明出，写上你的操作即可，无论是加载图片还是加载记录数据 都可以

别忘了引用jquery类库

1. $(window).scroll(function () { 
2. var scrollTop = $(this).scrollTop(); 
3. var scrollHeight = $(document).height(); 
4. var windowHeight = $(this).height(); 
5. if (scrollTop + windowHeight == scrollHeight) { 
6.  
7. //此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作 
8.  
9. //var page = Number($("#redgiftNextPage").attr('currentpage')) + 1; 
10. //redgiftList(page); 
11. //$("#redgiftNextPage").attr('currentpage', page + 1); 
12.  
13. } 
14. }); 

解析：

判断滚动条到底部，需要用到DOM的三个属性值，即scrollTop、clientHeight、scrollHeight。

scrollTop为滚动条在Y轴上的滚动距离。

clientHeight为内容可视区域的高度。

scrollHeight为内容可视区域的高度加上溢出(滚动)的距离。

从这个三个属性的介绍就可以看出来，滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。(兼容不同的浏览器)。