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结合 形成瀑布流的更多相关文章
- Masonry与AmazeUI结合实现瀑布流
做一个图片列表展示,由于照片数量太多,决定用瀑布流来实现 由于之前没有接触过瀑布流,不知从何下手 百度一下大家都在用Masonry 官网 https://masonry.desandro.com/ 这 ...
- Masonry + Ajax 实现无限刷新瀑布流
效果就如我的个人站yooao.cc,把我实现的思路分享给大家. Masonry渲染页面如果有图片时需要imagesLoaded辅助,不然有可能会造成布局重叠. 一个大体的思路:前端取得最后一篇文章的i ...
- js图片加载效果(延迟加载+瀑布流加载)
概述 两种图片加载的效果:一种是遇到图片较多时,带读条效果的加载提示:另一种是根据滑块的位置进行预加载,用户不察觉的情况下,实现瀑布流的加载效果 详细 代码下载:http://www.demodash ...
- 用js实现图片自动加载的瀑布流效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 利用JS实现简单的瀑布流效果
哈哈, 我又来啦, 在这一段时间里, 我简单的学习了一下javascript(JS), 虽然不是很懂啦, 但是我也简单的尝试着做了点小东西, 就比如现在流行的瀑布流效果, 经过我的努力终于成功的完成了 ...
- node.js中通过stream模块实现自定义流
有些时候我们需要自定义一些流,来操作特殊对象,node.js中为我们提供了一些基本流类. 我们新创建的流类需要继承四个基本流类之一(stream.Writeable,stream.Readable,s ...
- 堆糖瀑布流完整解决方案(jQuery)
2010年堆糖创办以来,网站界面经历过3-5次重大改版,logo也曾更换过两次,早期蓝红相间三个圈的logo恐怕很少有人记得了.与此同时,前端 js 框架也在默默的更新换代.最早堆糖上线时,js 采用 ...
- CollectionView水平和竖直瀑布流的实现
最近在项目中需要实现一个水平的瀑布流(即每个Cell的高度是固定的,但是长度是不固定的),因为需要重写系统 UICollectionViewLayout中的一些方法通过计算去实现手动布局,所以本着代码 ...
- iOS横向瀑布流的封装
前段时间, 做一个羡慕, 需要使用到瀑布流! 说道瀑布流, 或许大家都不陌生, 瀑布流的实现也有很多种! 从scrollView 到 tableView 书写的瀑布流, 然后再到2012年iOS6 苹 ...
随机推荐
- 清北学堂模拟day6 兔子
[问题描述] 在一片草原上有N个兔子窝,每个窝里住着一只兔子,有M条路径连接这些窝.更特殊地是,至多只有一个兔子窝有3条或更多的路径与它相连,其它的兔子窝只有1条或2条路径与其相连.换句话讲,这些兔子 ...
- web 开发前端学习
调试插件:http://www.getpostman.com/ http://bootstrap.evget.com/javascript.html bootstrap: http://www.bo ...
- VC++ 6.0使用定时器SetTimer;
背景: windows中使用VC++6.0制作了个交互界面向下位机定时发送数据及显示下位机上传的数据.定时发送则需要使用定时器. 本文只做记录如何调用,原理以后再深究. 正文: 首先,我生成的窗体类名 ...
- 2.交通聚类 -层次聚类(agnes)Java实现
1.项目背景 在做交通路线分析的时候,客户需要找出车辆的行车规律,我们将车辆每天的行车路线当做一个数据样本,总共有365天或是更多,从这些数据中通过聚类来获得行车路线规律统计分析. 我首先想到是K-m ...
- 用hexo书写github.io博客 学习心得 教程
很久没更新文章了,除了工作忙之外,可能就是自己懒惰了. 最近混迹与github,发现git上写博客也是个很不错的平台. 推荐使用 hexo 模版来书写,毕竟我们重点是写文章,而不是管理,所以有神奇何妨 ...
- BZOJ2730——[HNOI2012]矿场搭建
bzoj2730 & world final 2011 H 1.题目大意:就是有一个无向图,让你在里面选择点,使得,无论哪个点没了以后,其他的点都能到达你选择的任何一个点,输出最少 选择几个点 ...
- OpenCV图像的缩放
函数介绍: 1.cvResize 改变图像大小 void cvResize(const CvArr *src, CvArr *dst, int interpolation) 函数说 ...
- C++基础知识(1)----文件操作
参照 小菜鸟上校 的博客 // file operat.cpp : 定义控制台应用程序的入口点. /*上述例子的主要功能是将一个文件的内容复制到另一个文件中, 这个功能主要由一个函数copy来实现.它 ...
- maven项目部分知识
1.maven项目在pom.xml中用add dependencies加入jar包,搜索不到jar包的解决方案: Window --> Show View --> Other输入mave ...
- IC/RFID/NFC 关系与区别
IC卡 (Integrated Circuit Card,集成电路卡) 有些国家和地区也称智能卡(smart card).智慧卡(intelligent card).微电路卡(microcircuit ...