轉自：http://blog.csdn.net/feng2375/article/category/324578
首先在頁面中引入
<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圖片
}
},
//作為回調函數觸發masonry
function( newElements ) {
// 當加載時隱藏所有新項目
var $newElems = $( newElements ).css({ opacity: 0 });
// 在添加到masonry布局之前保證圖片載入
$newElems.imagesLoaded(function(){
// 現在可以顯示所有的元素了
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);