jquery实现随滚动条滚动而加载数据的功能(瀑布流)

jquery实现随滚动条滚动而加载数据的功能,目前比较流行的瀑布流就是这种实现形式,具体代码以及使用方法如下:

  1. <html>  
  2. <head runat="server">  
  3. <title>拉动滚动条加载数据</title>  
  4. <script src="http://www.daimajiayuan.com/templets/skins/js/jquery-1.8.1.min.js" type="text/javascript"></script>  
  5. <script type="text/javascript">  
  6. $(function () {  
  7. var i = 4;$(window).bind("scroll", function (event)  
  8. {  
  9. //滚动条到网页头部的 高度,兼容ie,ff,chrome  
  10. var top = document.documentElement.scrollTop + document.body.scrollTop;  
  11. //网页的高度  
  12. var textheight = $(document).height();  
  13. // 网页高度-top-当前窗口高度  
  14. if (textheight - top - $(window).height() <= 100) { if (i >= 100) { return;  
  15. //控制最大只能加载到100  
  16. }  
  17. $('#div1').css("height", $(document).height() + 100);i++;  
  18. //可以根据实际情况,获取动态数据加载 到 div1中  
  19. $('<div>' + i + '</div>').appendTo($('#div1'));  
  20. }  
  21. });  
  22. })  
  23. </script>  
  24. <style>  
  25. #div1 div  
  26. {  
  27. font-size: 100px;  
  28. background: #ccc;  
  29. margin-top: 5px;  
  30. }  
  31. </style>  
  32. </head>  
  33. <body>  
  34. <form id="form1" runat="server">  
  35. <div style="height: 1000px;" id="div1">  
  36. <div>  
  37. </div>  
  38. <div>  
  39. </div>  
  40. <div>  
  41. </div>  
  42. <div>  
  43. </div>  
  44. </div>  
  45. </form>  
  46. </body>  
  47. </html> 

转载请注明:代码家园 » jquery实现随滚动条滚动而加载数据的功能(瀑布流)

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)