当前位置:首页 > CMS教程 > Thinkphp > 列表

thinkPHP实现瀑布流

发布:smiling 来源: PHP粉丝网  添加日期:2014-04-11 17:18:29 浏览: 评论:0 

很多人都想做瀑布流的效果,这里告诉大家官网使用的方法,首先要下载瀑布流的插件jquery.masonry.min.js 地址:http://masonry.desandro.com/index.html里面包含的很多示例.

流程:

1,页面初始化时,调用插件进行一次排版;

2,当用户将滚动条拖到底部时,用ajax加载一次数据,并排版显示

3,重复2,直到无数据

Html代码:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  5. <title>Insert title here</title> 
  6. <!--样式--> 
  7. <style type="text/css"> 
  8. body {margin:40px auto; width:800px; font-size:12px; color:#666;} 
  9. .item{ 
  10. border: 1px solid #D4D4D4; 
  11. color: red; 
  12. margin: 0 10px 10px 0; 
  13. padding: 10px; 
  14. position: relative; 
  15. width: 200px; 
  16. .loading-wrap{ 
  17. bottom: 50px; 
  18. width: 100%; 
  19. height: 52px; 
  20. text-align: center; 
  21. display: none; 
  22. .loading { 
  23. padding: 10px 10px 10px 52px; 
  24. height: 32px; 
  25. line-height: 28px; 
  26. color: #FFF; 
  27. font-size: 20px; 
  28. border-radius: 5px; 
  29. background: 10px center rgba(0,0,0,.7); 
  30. .footer{ 
  31. border: 2px solid #D4D4D4; 
  32. </style> 
  33. <!--样式--> 
  34. </head> 
  35. <body> 
  36. <!--引入所需要的jquery和插件--> 
  37. <script type="text/javascript" src="/test/public/Js/jquery-1.7.2.min.js"></script> 
  38. <script type="text/javascript" src="/test/public/Js/jquery.masonry.min.js"></script> 
  39. <!--引入所需要的jquery和插件--> 
  40. <!--瀑布流--> 
  41. <div id="container" class=" container"> 
  42. <!--这里通过设置每个div不同的高度,来凸显布局的效果--> 
  43. <volist name="height" id="vo"> 
  44. <div class="item" style="height:{$vo}px;">瀑布流下来了</div> 
  45. <input type="hidden" name="last_id" class="last_id" value="{$vo.id}"/> 
  46. </volist> 
  47. </div> 
  48. <!--瀑布流--> 
  49. <!--加载中--> 
  50. <div id="loading" class="loading-wrap"> 
  51. <span class="loading">加载中,请稍后...</span> 
  52. </div> 
  53. <!--加载中--> 
  54. <!--尾部--> 
  55. <div class="footer"><center>我是页脚</center></div> 
  56. <!--尾部--> 
  57. <script type="text/javascript"> 
  58. //用于转换unix时间戳 
  59. function unix_to_datetime(unix)  
  60. var now = new Date(parseInt(unix) * 1000); 
  61. return now.toLocaleString().replace(/年|月/g, "-").replace(/日/g, " "); 
  62. $(function(){ 
  63. //页面初始化时执行瀑布流 
  64. var $container = $('#container'); 
  65. $container.masonry({ 
  66. itemSelector : '.item', 
  67. isAnimated: true 
  68. }); 
  69. //用户拖动滚动条,达到底部时ajax加载一次数据 
  70. var loading = $("#loading").data("on", false);//通过给loading这个div增加属性on,来判断执行一次ajax请求 
  71. $(window).scroll(function(){ 
  72. if(loading.data("on")) return; 
  73. if($(document).scrollTop() > $(document).height()-$(window).height()-$('.footer').height()){//页面拖到底部了 
  74. //加载更多数据 
  75. loading.data("on", true).fadeIn(); //在这里将on设为true来阻止继续的ajax请求 
  76.  
  77. //获取最后一个id 
  78. var lastid = $('.last_id:last').val(); 
  79. $.get( 
  80. "getMore", //要跳转的页面 
  81. {lastid:lastid},//传值 
  82. function(data){ 
  83. //获取到了数据data,后面用JS将数据新增到页面上 
  84. var getdata = data.data; 
  85. var html = ""
  86. if($.isArray(getdata)){ 
  87. $.each(data.data,function(i,item) { 
  88. html += "<div class=\"item\" style=\"height:"+data[i]+"px;\">瀑布又流下来了</div>"; 
  89. }); 
  90. var $newElems = $(html).css({ opacity: 0 }).appendTo($container); 
  91. $newElems.imagesLoaded(function(){ 
  92. $newElems.animate({ opacity: 1 }); 
  93. $container.masonry( 'appended', $newElems, true );  
  94. }); 
  95. //一次请求完成,将on设为false,可以进行下一次的请求 
  96. loading.data("on", false); 
  97. loading.fadeOut(); 
  98. }, 
  99. "json" 
  100. ); 
  101. }); 
  102. }); 
  103. </script> 
  104. </body> 
  105. </html> 

Action代码

  1. //初始化的数据 
  2. public function lists(){  
  3. $data = D('Info')->order('id DESC')->limit(10)->select(); 
  4. $this->assign('data'$data); 
  5. $this->display(); 
  6. //获取一次请求的数据 
  7. public function getMore(){  
  8. //获取最后一个id 
  9. if(!emptyempty($_GET['lastid']))$map['id'] = array('lt'$_GET['lastid']);  
  10. $data = D('Info')->where($map)->order('id DESC')->limit(10)->select(); 
  11. $this->ajaxReturn($data); 

注意:通过判断窗口是否滚动到页面底部来决定用ajax加载一次数据,如果不做处理,会一下子请求很多次,所以,要使用条件来限制.

我使用的是往一个元素上赋值 $("#loading").data("on", true);,在请求期间判断是true则不继续请求,然后在页面请求完成后再赋值为false.

Tags: thinkPHP 瀑布流

分享到: