闲来无事，玩玩瀑布流
一、使用masonry和infinitescroll结合(仿花瓣网)
masonry是基于Jquery插件，用于对CSS布局的可移动层进行重新布局。Masonry愿意石工，可以这样形象的理解，页面上很多大小不一的移动层可以想象成散乱的石头，经过Masonry这个石工处理后，变成一堵美观的墙。官网地址：http://masonry.desandro.com
infinitescroll是基于Infinite Scroll也是基于Jquery插件，用于当滚动条滚动时追加页面内容，有网友称这种效果为”无刷新无分页完美瀑布流”展现方式。官网地址：http://infinite-scroll.com/
在Masonry的Example里有自动的与infinite-scroll结合的实现滚动式分页的例子，地址在这里http://masonry.desandro.com/demos/infinite-scroll.html。
首先引入js
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="js/jquery.masonry.min.js" type="text/javascript"></script>
<script src="js/jquery.infinitescroll.min.js" type="text/javascript"></script>
然后布置item：
<div class="wrapper">
<div id="ctx_bar">
<div class="p">
最新采集
<ul class="pin-board-switcher clearfix">
<li class="first selected"><a class="pin-link" href="/all/">采集</a></li>
<li><a href="/boards/favorite/">画板</a></li>
<li class="last "><a class="user-link" href="/users/all/">推荐用户</a></li></ul>
<div class="right">
</div>
</div>
</div>
<div id="waterfall">
<div class="pin wfc wft">
<div class="hidden">
<a href="/o9skzwr1ai/">世俗男</a>采集到<a href="/boards/2165241">创意搞笑</a></div>
<div class="actions">
<div class="right">
<a class="like btn btn11 wbtn" onclick="return false;" href="#" data-id="60411540"><strong>
<em></em>赞</strong><span></span></a></div>
<div class="left">
<a class="thunderpin btn btn11 wbtn" title="快速转采" onclick="return false;" href="#"
data-id="60411540"><strong><em></em></strong><span></span></a><a class="repin btn btn11 wbtn"
onclick="app.requireLogin(function(){ app.showDialog('repin', '60411540');});return false;"
href="#"><strong>转采</strong><span></span></a></div>
</div>
<a class="img x" href="/pins/60411540/" target="_self">
<img alt="世俗男采集到创意搞笑" src="pic2/1.jpg"><span style="display: none" class="stop"></span></a>
<p class="description">
快来膜拜大神吧</p>
<p class="stats less">
</p>
<div class="convo attribution clearfix">
<p>
<a class="img x" title="世俗男" href="/o9skzwr1ai/">
<img src="pic2/1.jpg"></a><a
class="author x" href="/o9skzwr1ai/">世俗男</a> 采集到 <a class="x" href="/boards/2165241/">创意搞笑</a><a
class="replyButton" title="回复"></a></p>
</div>
<div style="display: none" class="comments muted">
</div>
<div style="display: none" class="write convo clearfix">
<a class="img x" title="" href="//">
<img src="/img/default_buddy_icon.jpg"></a>
<form method="post" action="/pins/60411540/comments" />
<textarea class="GridComment" placeholder="添加评论或把采集@给好友"></textarea><a class="grid_comment_button"
onclick="return false;" href="#"></a></FORM></div>
</div>
<div class="pin wfc wft">
<div class="hidden">
<a href="/uq3l7t003x/">张婧9189</a>采集到<a href="/boards/2221246">设计创意</a></div>
<div class="actions">
<div class="right">
<a class="like btn btn11 wbtn" onclick="return false;" href="#" data-id="60411539"><strong>
<em></em>赞</strong><span></span></a></div>
<div class="left">
<a class="thunderpin btn btn11 wbtn" title="快速转采" onclick="return false;" href="#"
data-id="60411539"><strong><em></em></strong><span></span></a><a class="repin btn btn11 wbtn"
onclick="app.requireLogin(function(){ app.showDialog('repin', '60411539');});return false;"
href="#"><strong>转采</strong><span></span></a></div>
</div>
<a class="img x" href="/pins/60411539/" target="_self">
<img alt="张婧9189采集到设计创意" src="pic2/2.jpg"><span style="display: none" class="stop"></span></a>
<p class="description">
文字、配图，统统都很喜欢 <a class="text-meta meta-tag" href="/tag/活动专题/">#活动专题#</a> <a class="text-meta meta-tag"
href="/tag/网页/">#网页#</a></p>
<p class="stats less">
</p>
<div class="convo attribution clearfix">
<p>
<a class="img x" title="张婧9189" href="/uq3l7t003x/">
<img src="pic2/2.jpg"></a><a
class="author x" href="/uq3l7t003x/">张婧9189</a> 通过 <a class="x" href="/hanyangui/">hanyangui</a> 采集到 <a
class="x" href="/boards/2221246/">设计创意</a><a class="replyButton" title="回复"></a></p>
</div>
<div style="display: none" class="comments muted">
</div>
<div style="display: none" class="write convo clearfix">
<a class="img x" title="" href="//">
<img src="/img/default_buddy_icon.jpg"></a>
<form method="post" action="/pins/60411539/comments" />
<textarea class="GridComment" placeholder="添加评论或把采集@给好友"></textarea><a class="grid_comment_button"
onclick="return false;" href="#"></a></FORM></div>
</div>
...n个<div class="pin wfc wft">
最后初始化
$(document).ready(function() {
$('.wrapper:eq(1)').masonry({
itemSelector: '.wfc',
gutterWidth: 15,
columnWidth: 240,
isFitWidth: true
});
$('#waterfall').infinitescroll({
navSelector: "#navigation", //导航的选择器，会被隐藏
nextSelector: "#navigation a", //包含下一页链接的选择器
itemSelector: ".wfc", //你将要取回的选项(内容块)
debug: true, //启用调试信息
animate: true, //当有新数据加载进来的时候，页面是否有动画效果，默认没有
extraScrollPx: 150, //滚动条距离底部多少像素的时候开始加载，默认150
bufferPx: 300, //载入信息的显示时间，时间越大，载入信息显示时间越短
errorCallback: function() {
alert('error');
}, //当出错的时候，比如404页面的时候执行的函数
localMode: true, //是否允许载入具有相同函数的页面，默认为false
dataType: 'html',//可以是json
// template: function(data) {
// //data表示服务端返回的json格式数据，这里需要把data转换成瀑布流块的html格式，然后返回给回到函数
// return '';
// },
loading: {
msgText: "加载中...",
finishedMsg: '没有新数据了...',
selector: '.loading' // 显示loading信息的div
}
}, function(newElems) {
//程序执行完的回调函数
var $newElems = $(newElems);
$('.wrapper:eq(1)').masonry('appended', $newElems);
});
});
二、使用grid-a-licious http://suprb.com/apps/gridalicious/
Grid—A—Licious是一个非常棒的响应时布局jQ插件，使用这个插件，你在布局页面的时候就不需要针对不同浏览器的屏幕尺寸写宽度，它会自动根据不同设备自适应宽度。
首先新需要引入 jQuery （这里推荐新浪的jQuery库）框架和 Grid-A-Licious 插件。
<script src="jquery.js"></script>
<script src="jquery.grid-a-licious.min.js"></script>
然后布置item：
<div id="content" class="">
<div class="item" >
<img src="pic2/1.jpg"/>
<div>1111</div>
<div class="item" >
<img src="pic2/2.jpg"/>
</div>
<div class="item" >
<img src="pic2/3.jpg"/>
</div>
<div class="item" >
<img src="pic2/4.jpg"/>
</div>
<div class="item">
<img src="pic2/5.jpg"/>
</div>
........任意个div
<div class="item">
<img src="pic2/6.png"/>
</div>
</div>
最后初始化：
<script>
function onComplete(){
alert('loadding completed!!');
}
$("#content").gridalicious({
gutter: 15,
240,
animate: true,
animationOptions: {
speed: 150,
duration: 300,
complete: onComplete
},
});
</script>