如何在 Masonry 调整大小之前执行代码

Question

我正在使用 Masonry 进行布局。当浏览器的窗口调整大小时，我想在 Masonry 重做布局之前执行一些计算。

到目前为止，我已经能够通过修改 jquery.masonry.js 文件并将回调函数添加到选项来做到这一点。但我更愿意在不修改砌体代码的情况下这样做。

添加的选项如下（砌体初始化）：

$container.masonry({
    itemSelector  : '.grid-element'
    , preResizeCallback : doPreResize
    , isResizable : true
});

然后在doPreResize 中做我需要做的任何事情。 .js 文件中的修改在resize 函数中（在 v2.0.110927 版本中的第 293 行附近）：

resize : function() {
  //added callback to be called before doing resizing-related code
  if (this.options.preResizeCallback)
  {
      this.options.preResizeCallback(this.element);
  }
  //rest of code

我想做的是初始化 Masonry，将 isResizable 选项设置为 false，然后半手动触发调整大小，同时保持智能调整大小事件。

是否可以设置“智能调整大小”事件来调用resizeLayout等函数？

function resizeLayout(event) {
    //do precalculations

    //tell masonry to reorganize layout
    $container.masonry();
}

我缺少的是如何设置调整大小事件，使其不会被持续触发，而是像 Masonry 在 isResizable 是 true 时所做的那样。

Answer 1

我可以这样设置事件：

jQuery(window).bind( 'smartresize.masonry', function(){
    $container.masonry();
});

但这失去了 Masonry 的优化，即只有在容器中的列数发生变化时才会重新排列砖块。如果我使用

jQuery(window).bind( 'smartresize.masonry', function(){
    $container.masonry("resize");
});

我最终使用了一个不是 documented 的内部函数。

Answer 2

Masonry 可以选择 bind/unbind 到 resize 事件。

我遇到了同样的问题，但通过将 masonry 'unbound' 初始化为 resize 事件来修复它，然后编写一个 resize 函数，以相同的方式调用 masonry，但在我希望首先执行的代码之后。

$container.masonry({
    isResizeBound: false
});

$(window).bind('resize', function() {
    someFunction();
    $continer.masonry({
        isResizeBound: false
    });
});