| 參數名 | 參數說明 |
|---|---|
| itemSelector | class選擇器,默認'.item' |
| columnWidth | 一列的寬度 |
| isAnimated | 使用jquery的佈局變化,默認true |
| animationOptions | animate屬性漸變效果(Object { queue: false, duration: 500 }) |
| gutterWidth | 列的間隙 Integer |
| isFitWidth | 適應寬度Boolean |
| isResizableL | 是否可調整大小 Boolean |
| isRTL | 使用從右到左的佈局 Boolean |
當需要排列圖片div時
需要調用
var $container = $('#container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.item',
columnWidth : 240
});
});
調用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中移除項目$(function(){
var $container = $('#containerPic'),sTimer;
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.itemPic',
columnWidth: 200
});
});
$(window).scroll(function scrollHandler(){
clearTimeout(sTimer);
sTimer = setTimeout(function() {
if(window.loaded == 1){$(window).unbind("scroll", scrollHandler);}
var c=document.documentElement.clientHeight || document.body.clientHeight, t=$(document).scrollTop();
if(t+c >= $container.offset().top+$container.height()){loadMore();}
}, 100);
});
var jLoading = $('#loading');
function loadMore()
{
var html="<div class='itemPic'><div class='pic'><img src='images/1.jpg' height='187' /></div></div>";
html+="<div class='itemPic'><div class='pic'><img src='images/2.jpg' height='378' /></div></div>";
html+="<div class='itemPic'><div class='pic'><img src='images/3.jpg' height='393' /></div></div>";
html+="<div class='itemPic'><div class='pic'><img src='images/4.jpg' height='276' /></div></div>";
html+="<div class='itemPic'><div class='pic'><img src='images/5.jpg' height='435' /></div></div>";
html+="<div class='itemPic'><div class='pic'><img src='images/6.jpg' height='387' /></div></div>";
html+="<div class='itemPic'><div class='pic'><img src='images/7.jpg' height='387' /></div></div>";
$container.append(html).masonry("reload");
jLoading.hide();
}
});來自：http://www.0773linji.com/jquery_plugs/jq_Masonry/