gutterWidthオプションをcolumnWidthと同じくらい動的にしたいのは、作業中のWordpressサイトのTwitterBootstrapレスポンシブレイアウトで使用したいからです。レイアウトでは、ウィンドウ幅に応じて20pxまたは30pxのガター幅を使用します。_getColumns関数を次のように拡張しました。
_getColumns:function(){
var a=this.options.isFitWidth?this.element.parent():this.element,b=a.width();
/* begin hack: read gutterWidth from int or function */
this.options.gutterWidth=(typeof this.options.gutterWidth=="function")?
this.options.gutterWidth(b):this.options.gutterWidth;
/* end hack */
これが私のinit関数です：
$(function(){
init_masonry();
});
function init_masonry() {
var $posts = $('#posts');
$posts.imagesLoaded(function() {
$posts.masonry({
itemSelector : 'article.post',
isAnimated: true,
isResizable: true,
gutterWidth: function(containerWidth) {
var window_width = $(window).width();
var gutter = (window_width < 1200) ? 20 : 30;
return gutter;
},
columnWidth: function(containerWidth) {
var window_width = $(window).width();
var gutter = (window_width <= 1200) ? 20 : 30;
var box_width = (containerWidth - (3 * gutter)) / 4;
return box_width;
}
});
});
}
ページの最初のロードで機能するようです。私の13インチノートパソコン（ウィンドウ幅> = 1200）では、30ピクセルのガターで正しく動作します。画面のサイズを変更すると、関数が20ピクセルに更新されないように見えます。
誰かがそれを修正する方法を知っていますか？
よろしくお願いします、モリッツ