如何将动态 gutterWidth 添加到 jQuery Masonry？答案

【问题标题】：How to add dynamic gutterWidth to jQuery Masonry?如何将动态 gutterWidth 添加到 jQuery Masonry？
【发布时间】：2013-02-05 18:39:05
【问题描述】：

我想让 gutterWidth 选项与 columnWidth 一样动态，因为我希望它与我正在开发的 Wordpress 网站的 Twitter Bootstrap 响应式布局一起使用。布局使用 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 */

这是我的初始化函数：

$(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 像素。

有人知道怎么解决吗？

提前致谢，莫里茨

【问题讨论】：

标签： javascript jquery twitter-bootstrap jquery-masonry

【解决方案1】：

我创建了一个拉取请求，以添加将函数传递给 gutterWidth 选项的可能性，就像 columnWidth 一样。

https://github.com/desandro/masonry/pull/295

也许你可以试试这个并在问题中发布一些反馈。

【讨论】：

【解决方案2】：

在 window.resize 中添加一个 masonry("reload")。

【讨论】：