如何將動態gutterWidth添加到jQuery Masonry？

我想讓gutterWidth選項像columnWidth一樣動態，因爲我希望它可以與我正在使用的Wordpress網站的Twitter Bootstrap響應式佈局一起使用。根據窗口寬度，佈局使用20px或30px的裝訂線寬度。我增強了_getColumns用下面的函數：如何將動態gutterWidth添加到jQuery Masonry？

_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 */

我的繼承人初始化函數：

$(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像素排水溝。通過調整屏幕，該功能似乎不更新爲20px。

有誰知道如何解決這個問題？

在此先感謝，莫里茨

來源

2012-10-28 user1781179