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

Question

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

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

添加的选项如下（masonry init）：

$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

我想要做的是使用 isRessized 初始化 Masonry > 选项设置为false，然后半手动触发调整大小，同时保留智能调整大小事件。

是否可以设置“智能调整大小”事件来调用诸如 resizeLayout 之类的函数？

function resizeLayout(event) {
    //do precalculations

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

我缺少的是如何设置调整大小事件，使其不会不断触发，而是以与 Masonry 相同的方式在 isResizes 为 true 时完成。

Answer 1

我可以像这样设置事件：

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

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

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

我最终会使用一个未记录的内部函数。

Answer 2

Masonry 可以选择绑定/取消绑定到调整大小事件。

我遇到了同样的问题，但通过将砌体初始化为“未绑定”到调整大小事件来修复它，然后编写一个调整大小函数，以相同的方式调用名为砌体的函数，但在我想要首先执行的代码之后。

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

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