您的位置：首页 > Web前端 > JavaScript

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

2014-01-28 12:03 302 查看

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