PHP头条
热点：

thinkPHP实现瀑布流


热度5 评论 226
www.PHPzy.Com  网友分享于：       浏览数16382次

thinkPHP实现瀑布流


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

流程:

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

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

3，重复2,直到无数据

Html代码:

  1. > 
  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 heretitle> 
  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. } 
  17. .loading-wrap{ 
  18. bottom: 50px; 
  19. width: 100%; 
  20. height: 52px; 
  21. text-align: center; 
  22. display: none; 
  23. } 
  24. .loading { 
  25. padding: 10px 10px 10px 52px; 
  26. height: 32px; 
  27. line-height: 28px; 
  28. color: #FFF; 
  29. font-size: 20px; 
  30. border-radius: 5px; 
  31. background: 10px center rgba(0,0,0,.7); 
  32. } 
  33. .footer{ 
  34. border: 2px solid #D4D4D4; 
  35. } 
  36. style> 
  37.  
  38. head> 
  39. <body> 
  40.  
  41. <script type="text/javascript" src="/test/public/Js/jquery-1.7.2.min.js">script> 
  42. <script type="text/javascript" src="/test/public/Js/jquery.masonry.min.js">script> 
  43.  
  44.  
  45. <div id="container" class=" container"> 
  46.  
  47. <volist name="height" id="vo"> 
  48. <div class="item" style="height:{$vo}px;">瀑布流下来了div> 
  49. <input type="hidden" name="last_id" class="last_id" value="{$vo.id}"/> 
  50. volist> 
  51. div> 
  52.  
  53.  
  54. <div id="loading" class="loading-wrap"> 
  55. <span class="loading">加载中，请稍后...span> 
  56. div> 
  57.  
  58.  
  59. <div class="footer"><center>我是页脚center>div> 
  60.  
  61. <script type="text/javascript"> 
  62. //用于转换unix时间戳 
  63. function unix_to_datetime(unix)  
  64. { 
  65. var now = new Date(parseInt(unix) * 1000); 
  66. return now.toLocaleString().replace(/年|月/g, "-").replace(/日/g, " "); 
  67. } 
  68. $(function(){ 
  69. //页面初始化时执行瀑布流 
  70. var $container = $('#container'); 
  71. $container.masonry({ 
  72. itemSelector : '.item', 
  73. isAnimated: true 
  74. }); 
  75. //用户拖动滚动条，达到底部时ajax加载一次数据 
  76. var loading = $("#loading").data("on", false);//通过给loading这个div增加属性on，来判断执行一次ajax请求 
  77. $(window).scroll(function(){ 
  78. if(loading.data("on")) return; 
  79. if($(document).scrollTop() > $(document).height()-$(window).height()-$('.footer').height()){//页面拖到底部了 
  80. //加载更多数据 
  81. loading.data("on", true).fadeIn(); //在这里将on设为true来阻止继续的ajax请求 
  82.  
  83. //获取最后一个id 
  84. var lastid = $('.last_id:last').val(); 
  85. $.get( 
  86. "getMore", //要跳转的页面 
  87. {lastid:lastid},//传值 
  88. function(data){ 
  89. //获取到了数据data,后面用JS将数据新增到页面上 
  90. var getdata = data.data; 
  91. var html = ""; 
  92. if($.isArray(getdata)){ 
  93. $.each(data.data,function(i,item) { 
  94. html += "<div class=\"item\" style=\"height:"+data[i]+"px;\">瀑布又流下来了div>"; 
  95. }); 
  96. var $newElems = $(html).css({ opacity: 0 }).appendTo($container); 
  97. $newElems.imagesLoaded(function(){ 
  98. $newElems.animate({ opacity: 1 }); 
  99. $container.masonry( 'appended', $newElems, true );  
  100. }); 
  101. //一次请求完成，将on设为false，可以进行下一次的请求 
  102. loading.data("on", false); 
  103. } 
  104. loading.fadeOut(); 
  105. }, 
  106. "json" 
  107. ); 
  108. } 
  109. }); 
  110. }); 
  111. script> 
  112. body> 
  113. 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. //获取一次请求的数据 
  8. public function getMore(){  
  9. //获取最后一个id 
  10. if(!emptyempty($_GET['lastid']))$map['id'] = array('lt', $_GET['lastid']);  
  11. $data = D('Info')->where($map)->order('id DESC')->limit(10)->select(); 
  12. $this->ajaxReturn($data); 
  13. } 

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

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

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

相关文章

相关频道：

PHP之友评论

今天推荐