后台：（有点问题 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. PHP函数preg_replace() 正则替换所有符合条件的字符串

    PHP preg_replace() 正则替换,与JavaScript 正则替换不同,PHP preg_replace() 默认就是替换所有符号匹配条件的元素. preg_replace (正则表达式 ...

  2. 【C语言入门教程】7.4 共用体

    7.4 共用体 共用体又称为联合体,是由不同的数据类型组成的一个整体.与结构体不同的是,共用体每次只能使用其中一个成员.结构体的总长度是结构体所有成员长度之和,共用体的总长度是其中最长一个数据类型的长 ...

  3. Ubuntu 14 编译安装 PHP 5.4.45 + Nginx 1.4.7 + MySQL 5.6.26 笔记

    Ubuntu 14 编译安装 PHP 5.4.45 + Nginx  1.8.0/1.4.7 + MySQL 5.6.26 笔记,主要是给自己的PC机安装,非生产环境! 一.下载必要的源码 1.1.下 ...

  4. Redis的一些坑

    转载请注明出处哈:http://carlosfu.iteye.com/blog/2254154 上上周和同事(龙哥)参加了360组织的互联网技术训练营第三期,美团网的DBA负责人侯军伟给大家介绍了美团 ...

  5. 如何打开xip格式的xcode安装包

    解决方法如下: 1.保证存储空间 20G 2.去除解压验证 xattr -d com.apple.quarantine Xcode_8_beta.xip 3.双击解压 详见: 从官网下载的 xcode ...

  6. jsp+servlet

  7. RPC（Remote Procedure Call Protocol）——远程过程调用协议 学习总结

        首先了解什么叫RPC,为什么要RPC,RPC是指远程过程调用,也就是说两台服务器A,B,一个应用部署在A服务器上,想要调用B服务器上应用提供的函数/方法,由于不在一个内存空间,不能直接调用,需 ...

  8. 将 JAR 转为 EXE – JSMOOTH 的使用教程（第二期）（转载）

    http://www.iteknical.com/convert-jar-to-exe-phase-ii-jsmooth-use-tutorial/

  9. phpcms分页用法简介

    PHPCMS分页的用法 前面需要有引用的list,代码如下: {pc:content action="lists" catid="11" order=" ...

  10. 【MySQL】MySQL server has gone away 怎么处理？

    直接上代码: from django.db import connection ... def is_connection_usable(): try: connection.connection.p ...