ThinkPHP官网瀑布流实现分享

很多人都想做瀑布流的效果，这里告诉大家官网使用的方法。
首先要下载瀑布流的插件jquery.masonry.min.js 地址：http://masonry.desandro.com/index.html里面包含的很多示例，但是都是英文的。。。我给大家写个小例子吧

流程：

1，页面初始化时，调用插件进行一次排版；
2，当用户将滚动条拖到底部时，用ajax加载一次数据，并排版显示
3，重复2，直到无数据

html代码

  1. <!DOCTYPE HTML>
  2. <html>
  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. }
  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. <!--引入所需要的jquery和插件-->
  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. <!--引入所需要的jquery和插件-->
  44. <!--瀑布流-->
  45. <div id="container" class=" container">
  46. <!--这里通过设置每个div不同的高度，来凸显布局的效果-->
  47. <volist name="height" id="vo">
  48.     <div class="item" style="height:{$vo}px;">瀑布流下来了</div>
  49. </volist>
  50. </div>
  51. <!--瀑布流-->
  52. <!--加载中-->
  53. <div id="loading" class="loading-wrap">
  54.     <span class="loading">加载中，请稍后...</span>
  55. </div>
  56. <!--加载中-->
  57. <!--尾部-->
  58. <div class="footer"><center>我是页脚</center></div>
  59. <!--尾部-->

  61. <script type="text/javascript">
  62. $(function(){
  63.     //页面初始化时执行瀑布流
  64.     var $container = $('#container');
  65.      $container.masonry({
  66.         itemSelector : '.item',
  67.         isAnimated: true
  68.      });

  70.      //用户拖动滚动条，达到底部时ajax加载一次数据
  71.     var loading = $("#loading").data("on", false);//通过给loading这个div增加属性on，来判断执行一次ajax请求
  72.     $(window).scroll(function(){
  73.         if(loading.data("on")) return;
  74.         if($(document).scrollTop() > $(document).height()-$(window).height()-$('.footer').height()){//页面拖到底部了
  75.             //加载更多数据
  76.             loading.data("on", true).fadeIn();         //在这里将on设为true来阻止继续的ajax请求
  77.             $.get(
  78.                 "{:U('Index/getMore')}", 
  79.                 function(data){
  80.                    //获取到了数据data,后面用JS将数据新增到页面上
  81.                     var html = "";
  82.                     if($.isArray(data)){
  83.                         for(i in data){
  84.                             html += "<div class=\"item\" style=\"height:"+data[i]+"px;\">瀑布又流下来了</div>";
  85.                         }
  86.                         var $newElems = $(html).css({ opacity: 0 }).appendTo($container);
  87.                         $newElems.imagesLoaded(function(){
  88.                             $newElems.animate({ opacity: 1 });
  89.                             $container.masonry( 'appended', $newElems, true ); 
  90.                               });
  91.                       //一次请求完成，将on设为false，可以进行下一次的请求
  92.                         loading.data("on", false);
  93.                     }
  94.                     loading.fadeOut();
  95.                 },
  96.                 "json"
  97.             );
  98.         }
  99.     });
  100. });
  101. </script>
  102. </body>
  103. </html>
复制代码

Action代码

    1. class UserAction extends Action{
    2. //初始化的数据
    3.         public function index(){
    4.         for ($i=0;$i<10;$i++){
    5.             $res[$i] = rand(100, 400);
    6.         }
    7.         $this->assign('height', $res);
    8.         $this->display();
    9.         
    10.     }
    11. //获取一次请求的数据
    12.         public function getMore(){
    13.         for ($i=0;$i<6;$i++){
    14.             $res[$i] = rand(100, 400);
    15.         }
    16.         $this->ajaxReturn($res);
    17.     }
    18. }

posted on 2016-07-27 10:22  Mr.风的影子  阅读(637)  评论(0)  编辑  收藏  举报

导航