一、Masonry
是基于Jquery插件,用于对CSS布局的可移动层进行重新布局。Masonry愿意石工,可以这样形象的理解,页面上很多大小不一的移动层可以想象成散乱的石头,经过Masonry这个石工处理后,变成一堵美观的墙。
官网地址:http://masonry.desandro.com
二、Infinite
Scroll
是基于Infinite Scroll也是基于Jquery插件,用于当滚动条滚动时追加页面内容,有网友称这种效果为”无刷新无分页完美瀑布流”展现方式。
官网地址:http://infinite-scroll.com/
三、Maonsry+Infinite-Scroll实现滚动式分页
在Masonry的Example里有自动的与infinite-scroll结合的实现滚动式分页的例子,地址在这里http://masonry.desandro.com/demos/infinite-scroll.html。
实际上这个例子还是有点粗糙,如果打开浏览器的开发者工具进行脚本跟踪,会发现翻到第5页后会出现404加载出错,到github下载整个project,可以看到目录pages下有2.html,3.html,4.html,5.html。Infinite-Scroll默认会往下翻,找不到6.html后报错。而且这个翻页的例子是生成了静态的html。我这里只贴出实现一个动态分页的实现代码(只是其中一个解决办法),希望能起到抛砖引玉的作用,希望有网友分享更加完美的代码。
代码采用Freemarker模板语言实现,代码片断:
<script type="text/javascript" src="/js/jquery/ jquery.1.7.1.min.js"></script>
<script type="text/javascript" src="/js/jquery/plugin/jquery.masonry.min.js"></script>
<script type="text/js" src="/scripts/jquery/plugin/jquery.infinitescroll.min.js"></script>
<script type="text/javascript">
var totalpage = ${result.totalPage};//这里是从服务端得到总共分页数
var readedpage = 1;//当前滚动到的页数
</script>
<!-- page-nav 创建一个不可见对象,用于载入下一页数据入口元素点 -->
<nav id="page-nav">
<a href="${media_root}/billstudy/bill/question/all/null/1"></a>
</nav>
<div id="bills_main">
<div id="masonid" class="bills_conright">
<#if result?exists && (result.data.size() gt 0)>
<#list result.data as template>
<div class="bills_piccon">
//这里是每条数据的内容
</div>
</#list>
</#if>
</div>
<div class="clear"></div>
</div>
<script>
$jq(function(){
var $container = $jq('#masonid');
readedpage++;
if(totalpage>1){//如果总共只有一页,那就不需要滚动加载效果了
$jq("#page-nav a").attr("href","/billstudy/bill/question/all/null/"+readedpage);
$container.imagesLoaded(function(){
$container.masonry({
// itemSelector: '.bills_piccon'
// , columnWidth: 100
});
});//这里参数可以为空,但必须要初始化masonry,否则后面会报找不到方法appended。
$container.infinitescroll({
navSelector : '#page-nav', //指定page-nav
nextSelector : '#page-nav a', // page-nav下一页的链接
itemSelector : '.bills_piccon', // 要获取追加的页面元素
loading: {
finishedMsg: 'No more pages to load.',
img: 'http://i.imgur.com/6RMhx.gif'
}
},
// pathParse: ["/billstudy/bill/question/all/null/", ""],
// trigger Masonry as a callback
function( newElements ) {
// hide new items while they are loading
var $newElems = $jq( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry('appended', $newElems, true);
readedpage++;//当前页滚动完后,定位到下一页
if(readedpage>totalpage){//如果滚动到超过最后一页,置成不要再滚动。
$jq("#page-nav").remove();
$container.infinitescroll({state:{isDone:true}});
}else{
//'#page-nav a置成下一页的值
$jq("#page-nav a").attr("href","/billstudy/bill/question/all/null/"+readedpage);
}
});
}
);
}
});
</script>
分享到:
相关推荐
这是一个本机运行的瀑布流例子,希望对你有帮助。
masonry+infinitescroll实现无限分页
jQuery masonry与infinitescroll两款瀑布流插件制作的最流行的瀑布流布局演示效果,可以无限浏览图片或内容无限加载的瀑布流效果。
瀑布流的组件,在别人的基础上进行删改,去掉了无用的一些功能,力争做成最简单纯组件
infinitescroll+imagesLoaded+Masonry,最完美三合一整合代码 使用的数据格式:JSON格式
。。。
。。。
Angularjs-Masonry-Infinit-scroll 具有无限滚动和砖石平铺布局的 Angularjs
使用Masonry结合UITableView-FDTemplateLayoutCell,纯代码实现聊天文字消息界面的展示;
bootstrap+masonry实现瀑布流 交流学习使用 原作者地址忘记了 参考学习
masonry瀑布流布局滑动到底部加载更多demo
React Native 瀑布流列表,用于展示瀑布流形式的内容,定制简单。
Masonry 瀑布流(Masonry)布局
jQuery瀑布流插件masonry实现的瀑布流布局网页,很不错的瀑布流插件,采用lightbox插件放大展示图片,非常的漂亮的布局。
vue-masonry-wall一种纯粹的vue响应式砌体实现,无需直接进行dom操作,对ssr友好,并具有延迟附加功能。 我创建了这个becaus vue-masonry-wall,这是一个纯vue响应式砌体实现,无需直接进行dom操纵,对ssr友好并带有...
该资源主要描述了利用Masonry+MVC+AFNetworking进行动态获取服务器JSON数据,详细的进行了归纳,有利于初学者进行开发。
React本机无限砌体 通过无限滚动来响应本机砌体...import Masonry from 'react-native-infinite-masonry' ; ... export default function App ( ) { return ( < Masonry itemsProvider = { dataItemProvider
KTAutolayoutDemo#AutoLayout自定义tableViewCell --- Masonry + UITableView+FDTemplateLayoutCell 纯代码实现#个人技术博客# 欢迎来批 在被frame虐的体无完肤的楼主,在新项目开始的时候毅然决定使用Autolayout来...
您可以通过npm或yarn命令从NPM注册表中下载react-responsive-masonry npm react-responsive-masonry yarn add react-responsive-masonry npm install react-responsive-masonry --save 如果您不使用包管理器,...
jquery.masonry 瀑布流插件 有详细的dome文档。用法简单,很好的jquery插件