后台：（有点问题 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. SGU 495. Kids and Prizes

    水概率....SGU里难得的水题.... 495. Kids and Prizes Time limit per test: 0.5 second(s)Memory limit: 262144 kil ...

  2. Springmvc + mybatis + spring 配置，spring事物

    今天配置了半天,发现,事物不起效果,主要出现如下错误: org.mybatis.spring.transaction.SpringManagedTransaction] - [JDBC Connect ...

  3. Linux下运行C语言程序

    一.编写C语言的源代码 二.用gcc -c C文件名生成.o文件 三.用gcc -o 可执行文件名 .o文件名 生成可执行文件 四.输入可执行文件名前加./执行可执行文件

  4. http之错误码

    http://en.wikipedia.org/wiki/List_of_HTTP_status_codes 响应码由三位十进制数字组成,它们出现在由HTTP服务器发送的响应的第一行.响应码分五种类型 ...

  5. Js控制iFrame切换加载网址

    <html> <head> <title>Js控制 iFrame 切换加载网址</title> </head> <body> & ...

  6. java中重载与重写的区别

    (1) 方法重载是让类以统一的方式处理不同类型数据的一种手段.多个同名函数同时存在,具有不同的参数个数/类型. 重载Overloading是一个类中多态性的一种表现. 然后我们再来谈谈 重写(Over ...

  7. ubuntu 出现g++ : Depends: g++-4.8 (>= 4.8.2-5~) but it is not going to be installed

    Ubuntu 你可以安装搜狗输入法也可以使用sunpingyin,看个人爱好. 唯一要注意的是,不能把系统的更新关了,否则会出现一大堆的问题,连g++都无法安装. 在设置里面: 我以前有一个很不好的习 ...

  8. python程序性能分析

    中文:http://www.cnblogs.com/zhouej/archive/2012/03/25/2379646.html 英文:https://www.huyng.com/posts/pyth ...

  9. 【转】【编码】ANSI,ASCII,Unicode,UTF8之一

          不同的国家和地区制定了不同的标准,由此产生了 GB2312.GBK.GB18030.Big5.Shift_JIS 等各自的编码标准.这些使用多个字节来代表一个字符的各种汉字延伸编码方式,称 ...

  10. CentOS Linux VPS安装IPSec+L2TP VPN

    CentOS Linux VPS安装IPSec+L2TP VPN 时间 -- :: 天使羊波波闪耀光芒 相似文章 () 原文 http://www.live-in.org/archives/818.h ...