js中masonry与infinitescroll结合形成瀑布流

后台：（有点问题 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结合 形成瀑布流

js中masonry与infinitescroll结合形成瀑布流