最近写个pinterest网站,其中一个重要的地方就是瀑布布局的应用,找了个jquery插件<a href="http://masonry.desandro.com/">masonry</a>,后来发现美丽说网站也是用的这个。下面例子带滚动条异步加载。
引用:
<link rel="stylesheet" href="/statics/css/masonry-site.css" type="text/css" media="screen" />
<script type="text/javascript" src="/statics/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="/statics/js/masonry-site/jquery.masonry.js"></script>
<script type="text/javascript" src="/statics/js/masonry-site/jquery.infinitescroll.min.js"></script>
<!-- 解决ie不支持html5的nav标签 -->
<!--[if lt IE 9]><script src="/statics/js/html5.js"></script><![endif]-->
文件下载<a href="http://html5shiv.googlecode.com/svn/trunk/html5.js">html5.js</a>
HTML:
<div>
<section id="content">
<div id="container" class="transitions-enabled infinite-scroll clearfix">
</div>
<!-- 地址中需要有2 分页-->
<nav id="page-nav"> <a href="/collections/loadContent/2/"></a> </nav>
</section>
</div>
JS:
<blockquote>
var $j = jQuery.noConflict();
$j(function(){
var $container = $j('#container');
$j.ajaxSetup({async: false});//设置为同步
$container.load('/collections/loadContent/1/'); //通过ajax加载页面数据到container节点下
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.box',
columnWidth: 103,
isFitWidth: true
});
});
$container.infinitescroll({
navSelector : '#page-nav', // selector for the paged navigation
nextSelector : '#page-nav a', // selector for the NEXT link (to page 2)
itemSelector : '.box', // selector for all items you'll retrieve
loading: {
finishedMsg: '已全部加载',
img: '/statics/img/icon/6RMhx.gif'
}
},
// trigger Masonry as a callback
function( newElements ) {
// hide new items while they are loading
var $newElems = $j( 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 });
columnWidth: 103,
$container.masonry( 'appended', $newElems, true );
});
}
);
});
AJAX加载的数据页面
<div class="box photo col2">
<a href="javascript:viewBmark();" title="Stanley by Dave DeSandro, on Flickr" ><img src="/statics/img/test/a1.jpg" alt="Stanley"/></a>
<div class="shortmsg">某某叉叉网站值得去瞅瞅,某某叉叉网站值得去瞅瞅。</div>
<div class="blockoper"><span style="color: #999;">收藏0 分享0 喜欢0</span> <a href="" style='float:right;'>去瞅瞅</a></div>
<div class="pover-init block-button">
<div class="sharp color5" style="padding-right: 10px;padding-left: 7px;">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="content">
喜欢♥
</div>
<b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>
</div>
<div class="sharp color5" style="padding-right: 10px;">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="content">
收藏
</div>
<b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>
</div>
<div class="sharp color5">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="content">
分享
</div>
<b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>
</div>
</div>
</div>
内容只要写在<div class="box photo col2">标签下面即可,上面的配置选项中columnWidth: 103文档上用于设置每列的宽度,但我死活设置效果不对,后面在样式表中col2可以换成其它的样式
.col1 { width: 80px; }
.col2 { width: 180px; }
.col3 { width: 280px; }
.col4 { width: 380px; }
.col5 { width: 480px; }
.col1 img { max-width: 80px; }
.col2 img { max-width: 180px; }
.col3 img { max-width: 280px; }
.col4 img { max-width: 380px; }
.col5 img { max-width: 480px; }
现在还只做个简单的样子,后期再增加分页方面的处理。
资料:http://kayosite.com/jquery-ajax-turn-page-and-cascade-layout.html
http://blog-website.rhcloud.com/blog/?p=90
效果图:
分享到:
相关推荐
基于jquery.masonry插件开发的瀑布流ajax动态加载数据功能(使用的是aspx的页面)
bootstrap配合Masonry插件实现瀑布式布局 详细内容请看: http://blog.csdn.net/wild46cat/article/details/54600513
masonry瀑布流布局需要使用的插件 里面有缩略版和完整版 这个本身在官网有 不过一下载就一堆东西 都不需要的 直接抽这个出来 方便大家下载使用 这里就不扣分啦 方便而已 方便而已
Masonry布局插件
Jquery网站瀑布流插件masonry是一款jquery.masonry插件。
jquery Masonry插件方砖布局图片与内容无限滚动加载
瀑流布局现在在很多大大小小的网站中都可以看到,可是你发现如果你想用是一件相当麻烦的事,今天有了Masonry 插件,给大家带来一个很大的惊喜,简单使用,轻量级应用。 类似的布局,似乎一夜之间出现在国内外大大...
jQuery无限加载瀑布流插件masonry是一款基于masonry插件实现的jQuery无限加载瀑布流代码。
jquery.masonry 瀑布流插件 有详细的dome文档。用法简单,很好的jquery插件
我们可以使用 jQuery 的 Masonry 插件来实现这种页面形式,下面介绍一下方法。 1、分别下载 jQuery 与 Masonry ,然后把他们都加载到页面中使用。 加载代码: [removed][removed] [removed][removed] 解释:很简单...
jQuery瀑布流插件masonry实现的瀑布流布局网页,很不错的瀑布流插件,采用lightbox插件放大展示图片,非常的漂亮的布局。
瀑流式布局,jquery Masonry,布局,列表布局,瀑流
Masonry是一款jQuery网格布局(瀑布流)插件...这个库还可以作为jQuery插件使用,帮助你轻松实现这种效果。Masonry 3.2.1 更新日志: 修复缺少`package.json`依赖 添加CommonJS的支持 jQuery Bridget不再明确的依赖关系树
sortableJs是一款带排序功能的js masonry瀑布流插件。sortableJs能够使元素以卡片形式显示,并以masonry瀑布流方式进行布局,通过点击分类按钮,可以将卡片按指定的方式动态排序。
这是一款使用jQuery Masonry和css3制作的全屏响应式瀑布流网格布局插件。该插件布局采用流行的瀑布流布局,当点击查看更多链接,会切换到该项目的全屏幻灯片模式,在幻灯片模式下可以浏览所有的图片和信息。
masonry中文文档 瀑布流插件