后台：（有点问题 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. nyoj 171 聪明的kk

    聪明的kk 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 聪明的“KK”非洲某国展馆的设计灵感源于富有传奇色彩的沙漠中陡然起伏的沙丘,体现出本国不断变换和绚丽多彩的 ...

  2. 输入三个数a,b,c，要示按由小到大的顺序输出

    #include<stdio.h>int main(){       double a,b,c,t;       scanf("%lf %lf %lf",&a, ...

  3. BZOJ2809——[Apio2012]dispatching

    1.题目大意:给一棵树和M值,每个点有两个权值C和L,选x个点,这x个点的C值的和不能超过M,且这x个点如果都在某个子树内 定义满意度为x*这个子树的根的L值 2.分析:这是一道可并堆的题目,我们考虑 ...

  4. MRC

    MRC 关于NSString,retainCount为-1 C方法中含有Copy的方法名, 都要释放 例如CFRealse(ref) 字符串常量,因为one为字符串常量,系统不会回收,也不会对其作引用 ...

  5. [转载]PO BO VO DTO POJO DAO概念及其作用

    原文链接:http://jeoff.blog.51cto.com/186264/88517/ POJO = pure old java object or plain ordinary java ob ...

  6. 剑指Offer 二叉搜索树的后序遍历序列

    题目描述 输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历的结果.如果是则输出Yes,否则输出No.假设输入的数组的任意两个数字都互不相同.   思路: 后续遍历数组的尾部为根节点,前面的部分 ...

  7. JavaScript中var关键字的使用详解

    作用 声明作用:如声明个变量. 语法 ? 1 var c = 1; 省略var 在javascript中,若省略var关键字而直接赋值,那么这个变量为全局变量,哪怕是在function里定义的. ? ...

  8. Vijos P1769 网络的关键边

    Description 一个连通的无向图,有些点有A属性,有些点有B属性,可以同时具有.删掉某条边后,如果使得连通块中一些点不具有A,B属性的点,求这些边. Sol Tarjan求割边. 首先这些边一 ...

  9. 40 网络相关函数(八)——live555源码阅读(四)网络

    40 网络相关函数(八)——live555源码阅读(四)网络 40 网络相关函数(八)——live555源码阅读(四)网络 简介 15)writeSocket向套接口写数据 TTL的概念 函数send ...

  10. 9.4---集合子集（CC150）

    这题非常复杂.牛客网上对应的题目对结果要求比较苛刻,所以要调整. 整体思路是:先放进去一个,然后第二个来的时候插入到已有的,并且把自己也放进去. public static ArrayList< ...