后台：（有点问题 page应该从1开始 而不是从0开始）

  1.     public function actionExperts()
        {
            $top=5;
            $page=empty($_GET['page']) ? 0 : $_GET['page'];
            $offset = $top*$page;    
            $result = AboutUs::getExpertsList($top, $offset);
            if(!$result || count($result) < $top){ $para=FALSE;}  else { $para=TRUE;}
            //这里是获取html 不返回json数据，返回json数据需要处理
    //        if (Yii::app()->request->isAjaxRequest) {            
    //            $this->ajaxRender(array('result'=>$result,'page'=>$page+1,'para'=>$para));
    //        } else {
                $page=$page+1;
                $this->render('experts',compact('result','page','para'));
    //      }
        }

前台：

  1. <!doctype html>
  2. <html lang="en">
  3.     <head>
  4.         <title>专家顾问_先之</title>
  5.         <?php require($this->getViewFile('/public/header_meta'));?>
  6.         <?php require($this->getViewFile('/public/header_js_css'));?>
  7.         <script src="<?php echo FRONT_PUBLIC;?>js/jquery.masonry.min.js"></script>
  8.         <script src="<?php echo FRONT_PUBLIC;?>js/jquery.infinitescroll.min.js"></script>
  9.     </head>
  10. <body class="expert">
  11.     <header date-role="header">
  12.         <div class="w">
  13.             <a href="<?php echo $this->createUrl('aboutus/index');?>" data-icon="arrow-l"></a>
  14.             <h1>专家顾问</h1>
  15.         </div>
  16.     </header>
  17.     <ul class="org_list2">
  18.     <?php foreach($result as $key=>$value):?>
  19.         <li>
  20.             <img src="<?php echo $value['pic'];?>" width="500" height="400" alt="<?php echo $value['name'];?>">
  21.         </li>
  22.     <?php endforeach;?>
  23.     </ul>
  24.         <div class="clear"></div>
  25.         <div id="loadingbox" style="clear:both; text-align:center"></div>
  26.         <div id="page" style="text-align: center">
  27.             <a href="<?php echo $this->createUrl('site/experts')?>/page/<?php echo $page;?>">下一页</a>
  28.         </div>
  29.  
  30.     <?php require($this->getViewFile('/public/nav'));?>
  31. </body>
  32. </html>
  33.  
  34. <script>
  35.     $(function(){
  36.         $('.org_list2').masonry({
  37.               itemSelector: '.org_list2 li'
  38.         });
  39.         $('.org_list2').infinitescroll({
  40.                 navSelector: '#page',
  41.                 nextSelector: '#page a', //下一页选择器
  42.                    itemSelector: "li", //下一页中需要被加载进当前页的块
  43.  
  44.                    dataType: 'html',//可以是json
  45.  
  46. //                template: function(data) {
  47. //                    //data表示服务端返回的json格式数据，这里需要把data转换成瀑布流块的html格式，然后返回给回到函数
  48. //                    console.log(data);
  49. //                    var list = data.data.result;
  50. //                    var html = '';
  51. //                    $.each(list, function(i, item)
  52. //                    {//把数据遍历拼接处理
  53. //                        html += '<li><img src="'+ item.pic +'" width="500" height="400" alt="'+ item.name +'"></li>';
  54. //                    });
  55. //                    return html;
  56. //                },
  57. //                 state : {
  58. //                    currPage : '1' // 翻页后避免从1开始
  59. //                 },
  60.                    loading: { //加载效果
  61.                       finishedMsg: 'No more pages to load',
  62.                       img: 'http://168.192.122.74/mobile.9first.com/Code/version1.0/webroot/js/loading.gif',
  63.                       selector:"#loadingbox"//指定图片加载的位置
  64.                 }
  65.             },
  66.             function (newElements) { //回调函数，用Masonry布局
  67.                 var newElems = $(newElements);
  68.                  $('.org_list2').masonry('appended', newElems);
  69.             }
  70.       );
  71.       $('.org_list2').masonry({ itemSelector : '.org_list2 li', //子类元素
  72.                                 columnWidth : 251 //设置元素的一列的宽度
  73.           });
  74.     });
  75. </script>

参考页面：http://blog.chinaunix.net/uid-28619086-id-3562738.html  和百度网盘中的瀑布流页面

js中masonry与infinitescroll结合 形成瀑布流的更多相关文章

  1. Masonry与AmazeUI结合实现瀑布流

    做一个图片列表展示,由于照片数量太多,决定用瀑布流来实现 由于之前没有接触过瀑布流,不知从何下手 百度一下大家都在用Masonry 官网 https://masonry.desandro.com/ 这 ...

  2. Masonry + Ajax 实现无限刷新瀑布流

    效果就如我的个人站yooao.cc,把我实现的思路分享给大家. Masonry渲染页面如果有图片时需要imagesLoaded辅助,不然有可能会造成布局重叠. 一个大体的思路:前端取得最后一篇文章的i ...

  3. js图片加载效果（延迟加载+瀑布流加载）

    概述 两种图片加载的效果:一种是遇到图片较多时,带读条效果的加载提示:另一种是根据滑块的位置进行预加载,用户不察觉的情况下,实现瀑布流的加载效果 详细 代码下载:http://www.demodash ...

  4. 用js实现图片自动加载的瀑布流效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  5. 利用JS实现简单的瀑布流效果

    哈哈, 我又来啦, 在这一段时间里, 我简单的学习了一下javascript(JS), 虽然不是很懂啦, 但是我也简单的尝试着做了点小东西, 就比如现在流行的瀑布流效果, 经过我的努力终于成功的完成了 ...

  6. node.js中通过stream模块实现自定义流

    有些时候我们需要自定义一些流,来操作特殊对象,node.js中为我们提供了一些基本流类. 我们新创建的流类需要继承四个基本流类之一(stream.Writeable,stream.Readable,s ...

  7. 堆糖瀑布流完整解决方案(jQuery)

    2010年堆糖创办以来,网站界面经历过3-5次重大改版,logo也曾更换过两次,早期蓝红相间三个圈的logo恐怕很少有人记得了.与此同时,前端 js 框架也在默默的更新换代.最早堆糖上线时,js 采用 ...

  8. CollectionView水平和竖直瀑布流的实现

    最近在项目中需要实现一个水平的瀑布流(即每个Cell的高度是固定的,但是长度是不固定的),因为需要重写系统 UICollectionViewLayout中的一些方法通过计算去实现手动布局,所以本着代码 ...

  9. iOS横向瀑布流的封装

    前段时间, 做一个羡慕, 需要使用到瀑布流! 说道瀑布流, 或许大家都不陌生, 瀑布流的实现也有很多种! 从scrollView 到 tableView 书写的瀑布流, 然后再到2012年iOS6 苹 ...

随机推荐

  1. XML理解

    XML:页面之间传递数据,跨平台传递,核心标签 HTML:超文本标记语言,核心标签 <xml version='1.0'>版本1.0<Nation> <one> & ...

  2. keepalived安装

    两台虚拟机 两台配置操作一样 环境配置 [root@lb01 /]# yum -y install openssl openssl-devel [root@lb01 /]# yum -y instal ...

  3. EasyUI中Dialog的使用

    $(function () { $('<div id="dlgContent"></div>').appendTo($('body')); $('#dlgC ...

  4. An error in projects

    Error能使系统产生Failure从而导致系统不能达到所需的功能. 曾经,做一个关于酒店管理系统的项目.因为数据库表主外键的连接错误,当对页面的添加桌位功能进行测试时,不能正确的添加. 后通过逐行对 ...

  5. word20161201

    http://baike.baidu.com/link?url=ZTTkA-suMlJNGb2AeNBE2E6MZQZwjkvWXKgmUpeLBIrCfC-k32cGJOJLrtDlLXjsTfkD ...

  6. WebStorm设置左侧菜单栏背景色和样式

    WebStrom一直以来都是默认的白色主题,今天想修改了下主题皮肤,结果导致左侧项目资源栏和顶部菜单栏也变成了黑色,结果无法改变回来,网上查了各种帖子,居然也没找到解决方法,自己研究了半天,终于搞定了 ...

  7. 这些情况下onReume不应该是你的选择

    面试Android程序员的时候问过以下几个基本问题,得到的回答经常不尽人意: 1, Activity A跳转到Activity B,Activity B完成后,Activity A要刷新一下自己的数据 ...

  8. codeigniter文件上传问题

    codeigniter自带的文件下载辅助函数非常简单实用,但是在处理大文件的时候,就显得捉襟见肘. 在网上找到了一个对download_helper.php文件的扩展,非常好用,记录下,遇到相同问题的 ...

  9. SVN的目录说明

    subversion目录说明:*dav目录:是提供apache与mod_dav_svn使用的目录,让他们存储内部数据*db目录:就是所有版本控制的数据存放文件*hooks目录:放置hook脚本文件的目 ...

  10. Maven 实用命令和技巧

    1.Jar冲突排查 maven dependency:tree 人工排除