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 和百度网盘中的瀑布流页面
