這里給大家分享的是使用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。(兼容不同的瀏覽器)。