masonry插件使用
最近写个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
效果图：