?
? ? 最近写个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
效果图：
