zoukankan      html  css  js  c++  java

  • 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. }
  • 相关阅读:
    性能测试流程
    N种自动化测试框架（包含自动化和性能，总有一款适合你）
    自动化测试框架：jmeter + maven+ jenkins
    oracle中删除表：drop、delete、truncate
    SpringBoot开发mockserver及生成swagger接口文档
    五步法颈椎病自我按摩图解
    自动化必备：自动化持续集成环境搭建（上）：git + maven + jenkins
    玩转jmeter：beanshell必备技能
    EFK-2：ElasticSearch高性能高可用架构
    MySQL5.7之在线DDL不会锁表
  • 原文地址：https://www.cnblogs.com/sweet521/p/5710060.html
Copyright © 2011-2022 走看看