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

    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'));
//      }
    }

前台：

<!doctype html>

<html lang="en">

    <head>

        <title>专家顾问_先之</title>

        <?php require($this->getViewFile('/public/header_meta'));?>

        <?php require($this->getViewFile('/public/header_js_css'));?>

        <script src="<?php echo FRONT_PUBLIC;?>js/jquery.masonry.min.js"></script>

        <script src="<?php echo FRONT_PUBLIC;?>js/jquery.infinitescroll.min.js"></script>

    </head>

<body class="expert">

    <header date-role="header">

        <div class="w">

            <a href="<?php echo $this->createUrl('aboutus/index');?>" data-icon="arrow-l"></a>

            <h1>专家顾问</h1>

        </div>

    </header>

    <ul class="org_list2">

    <?php foreach($result as $key=>$value):?>

        <li>

            <img src="<?php echo $value['pic'];?>" width="500" height="400" alt="<?php echo $value['name'];?>">

        </li>

    <?php endforeach;?>

    </ul>

        <div class="clear"></div>

        <div id="loadingbox" style="clear:both; text-align:center"></div>

        <div id="page" style="text-align: center">

            <a href="<?php echo $this->createUrl('site/experts')?>/page/<?php echo $page;?>">下一页</a>

        </div>

    <?php require($this->getViewFile('/public/nav'));?>

</body>

</html>

<script>

    $(function(){

        $('.org_list2').masonry({

              itemSelector: '.org_list2 li'

        });

        $('.org_list2').infinitescroll({

                navSelector: '#page',

                nextSelector: '#page a', //下一页选择器

                   itemSelector: "li", //下一页中需要被加载进当前页的块

                   dataType: 'html',//可以是json

//                template: function(data) {

//                    //data表示服务端返回的json格式数据，这里需要把data转换成瀑布流块的html格式，然后返回给回到函数

//                    console.log(data);

//                    var list = data.data.result;

//                    var html = '';

//                    $.each(list, function(i, item)

//                    {//把数据遍历拼接处理

//                        html += '<li><img src="'+ item.pic +'" width="500" height="400" alt="'+ item.name +'"></li>';

//                    });

//                    return html;

//                },

//                 state : {

//                    currPage : '1' // 翻页后避免从1开始

//                 },

                   loading: { //加载效果

                      finishedMsg: 'No more pages to load',

                      img: 'http://168.192.122.74/mobile.9first.com/Code/version1.0/webroot/js/loading.gif',

                      selector:"#loadingbox"//指定图片加载的位置

                }

            },

            function (newElements) { //回调函数，用Masonry布局

                var newElems = $(newElements);

                 $('.org_list2').masonry('appended', newElems);

            }

      );

      $('.org_list2').masonry({ itemSelector : '.org_list2 li', //子类元素

                                columnWidth : 251 //设置元素的一列的宽度

          });

    });

</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. oracle中session的查询与删除

    1. 查询连接的session select sid,serial#,username,program,machine,status from v$session 查询的结果如下,可以根据机器和登录的 ...

  2. cocos布局分析

    HBox和VBox布局 HBox只是一个水平布局包装类. HBox里面所有的孩子节点都会水平排列成一行 VBox仅仅是对垂直布局的一个简便的类封装. VBox把它的子节点布局在一竖列中. Layout ...

  3. Codeforces Round #292 (Div. 2) C. Drazil and Factorial

    题目链接:http://codeforces.com/contest/515/problem/C 给出一个公式例如:F(135) = 1! * 3! * 5!; 现在给你一个有n位的数字a,让你求这样 ...

  4. HDU 5023 A Corrupt Mayor's Performance Art（线段树区间更新）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5023 解题报告:一面墙长度为n,有N个单元,每个单元编号从1到n,墙的初始的颜色是2,一共有30种颜色 ...

  5. NSRunLoop 概述和原理

    NSRunLoop 概述和原理 1.什么是NSRunLoop? 我们会经常看到这样的代码: - (IBAction)start:(id)sender { pageStillLoading = YES; ...

  6. 自动布局之autoresizingMask使用详解（Storyboard&Code）

    自动布局之autoresizingMask使用详解(Storyboard&Code) http://www.cocoachina.com/ios/20141216/10652.html 必须禁 ...

  7. Oracle Database 11g Express Edition学习笔记

    修改字符集 使用用户system,通过sqlplus程序连接到Oracle数据库,输入以下命令,查看字符集: SQL> select userenv('language') from dual; ...

  8. opencv png和jpg的叠加

    char *bgFile = "C:/C_Project/HandTraining/Debug/res/bg.jpg"; FILE *file = fopen(bgFile, &q ...

  9. OpenCV高斯模型

    int main(int argc, char** argv) { //std::string videoFile = "E:\\C_VC_code\\Text_Photo\\dingdan ...

  10. windows下的getopt/getoptlong函数

    windows下的getopt/getoptlong函数 getopt/getopt_long函数是GNU C中的函数,在linux编程中很常用到.这里就不介绍了. windows下没有找到类似的函数 ...