后台：（有点问题 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. codevs4096 删数问题

    题目描述 Description 键盘输入一个高精度的正整数N,去掉其中任意S个数字后剩下的数字按原左右次序将组成一个新的正整数.编程对给定的N 和S,寻找一种方案使得剩下的数字组成的新数最小. 输入 ...

  2. CentOS编译安装Apache 2.4.x时报错:configure: error: Bundled APR requested but not found at ./srclib/. Download and unpack the corresponding apr and apr-util packages to ./srclib/.

    先前按照这篇文章“CentOS6.x编译安装LAMP(2):编译安装 Apache2.2.22”去编译安装Apache2.2.x版本时,安装得挺顺利,今天换成Apache2.4.x版本,安装方法一样, ...

  3. Ajax的使用

    Ajax是JQuery实现XMLHttpRequest的一种方式. 增加HTML5按钮,含有点击事件: <button type="button" class="b ...

  4. ubutu之jdk安装

    1.jdk下载 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 2.解压jdk- ...

  5. java之远程接口调用

    一.通过地址栏传值 1.项目结构 2.pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi ...

  6. FineUI第十八天---表格之事件的处理

    表格之事件的处理: 1.事件参数: GridPageEventArgs:表格分页事件参数,对应onPageIndexChange事件. NewPageIndex:新页面的索引 GridSortEven ...

  7. Palindrome Partitioning II Leetcode

    Given a string s, partition s such that every substring of the partition is a palindrome. Return the ...

  8. cocos2d-x 内存管理浅析

    Cocos2d-x用create创建对象, 这个方法已经被引擎封装成一个宏定义了:CREATE_FUNC, 下面是这个宏定义的实现: #define CREATE_FUNC(__TYPE__) \   ...

  9. cocos2dx 做test遇到一个问题，记录下来

    我新建了一个group,然后再group里面创建一个文件A.h,再A.h中#include group同一级的文件CBaseTest.h,方法是: #include "../BaseTest ...

  10. phpcms 搜索结果页面栏目不显示解决 方法

    头部文件 定义 <?php if(!isset($CATEGORYS)) { $CATEGORYS = getcache('category_content_'.$siteid,'commons ...