Question

我正在使用砌体进行布局。当浏览器的窗口调整大小时，我想在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

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

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

function resizeLayout(event) {
    //do precalculations

    //tell masonry to reorganize layout
    $container.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 /取消绑定resize事件。

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

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

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

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

2 个答案: