Maonsry+Infinite-Scroll实现滚动式分页，网上有很多，这里只说：
瀑布流插件的一个基本使用，附上基本功能的demo
jquery.masonry的跑通demo a a a a a aa a a a a aa a a a a aa a a a a aa a a a a aa a a a a aa a a a a aa a a a a aa a a a a aa a a a a aa a a a a a a a a a a a a a a a a a a a aa a a a a a a a a aa a a a a aa a a a a aa a a a a aa a a a a aa a a a a aa a a a a aa a a a a aa a a a a aa a a a a aa a a a a aa a a a a aa a a a a a a a a a a a a a a a a a a a aa a a a a a a a a aa a a a a a
首先在页面中引入
<script src="jquery-1.7.1.min.js"></script><script src="jquery.masonry.min.js"></script><script src="jquery.infinitescroll.js"></script>排列body中的内容:<BODY> <div id="container"> <div class="item">a a a a a a</div> <div class="item">a a a a a a</div> <div class="item">a a a a a a</div> <div class="item">a a a a a a</div> </div></BODY>在js中调用插件：<script type="text/javascript"> $(function(){ $('#container').masonry({ // options 设置选项 itemSelector : '.item',//class 选择器 columnWidth : 240 ,//一列的宽度 Integer isAnimated:true,//使用jquery的布局变化 Boolean animationOptions:{ //jquery animate属性 渐变效果 Object { queue: false, duration: 500 } }, gutterWidth:0,//列的间隙 Integer isFitWidth:true,// 适应宽度 Boolean isResizableL:true,// 是否可调整大小 Boolean isRTL:false,//使用从右到左的布局 Boolean });});</script>当需要排列图片div时：需要调用：<script>var $container = $('#container');$container.imagesLoaded(function(){ $container.masonry({ itemSelector : '.item', columnWidth : 240 });});</script>调用masonry插件的方法格式是：$('#container').masonry( 'methodName', [optionalParameters] )例如：.masonry( 'appended', $content, isAnimatedFromBottom )//触发添加到container的项目的布局.masonry( 'destroy' )// 完全移除masonry的功能 返回到元素预初始化状态.masonry( 'layout', $items, callback )// 指定项目的布局.masonry( 'option', options ) //设置option.masonry( 'reloadItems' ) //重新聚合所有项目以当前的顺序.masonry( 'reload' ) //用于预先考虑或者插入项目 .masonry( 'reloadItems' )的简化版.masonry( 'remove', $items ) //从masonry实例或dom中移除项目调用infinitescroll插件：$container.infinitescroll({ navSelector : '#page-nav', //分页导航的选择器 nextSelector : '#page-nav a', //下页连接的选择器 itemSelector : '.box', //你要检索的所有项目的选择器 loading: { finishedMsg: 'No more pages to load.',//结束显示信息 img: 'http://i.imgur.com/6RMhx.gif'//loading图片 }},//作为回调函数触发masonryfunction( newElements ) { // 当加载时隐藏所有新项目 var $newElems = $( newElements ).css({ opacity: 0 });// 在添加到masonry布局之前保证图片载入 $newElems.imagesLoaded(function(){ // 现在可以显示所有的元素了 $newElems.animate({ opacity: 1 }); $container.masonry( 'appended', $newElems, true ); });});