Как выполнить код перед изменением размеров Masonry

Я использую Masonry для макета. Когда размер окна браузера изменяется, я хотел бы выполнить некоторые вычисления, прежде чем Masonry переделает макет.

До сих пор я мог сделать это, изменив файл jquery.masonry.js и добавив функцию обратного вызова в параметры. Но я бы предпочел сделать это без изменения кода кладки.

Добавлена ​​следующая опция (masonry init):

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

а затем в doPreResize делаю все, что мне нужно. Модификация в файле .js находится в функции resize (около строки 293 в версии v2.0.110927):

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.


jquery window-resize onresize jquery-masonry
person frozenkoi    schedule 21.12.2011    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я могу настроить событие следующим образом:

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

Но при этом теряется оптимизация Masonry, при которой блоки переставляются только в том случае, если изменяется количество столбцов, которые помещаются в контейнер. Если вместо этого я использую

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

В итоге я использую внутреннюю функцию, которая не задокументирована.

person frozenkoi    schedule 22.12.2011

arrow_upward
0
arrow_downward

У Masonry есть возможность привязать/отменить привязку к событию изменения размера.

У меня была та же проблема, но я исправил ее, инициализировав каменную кладку «непривязанной» к событию изменения размера, а затем написав функцию изменения размера, которая вызвала каменную кладку таким же образом, но после кода, который я хотел выполнить первым.

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

$(window).bind('resize', function() {
    someFunction();
    $continer.masonry({
        isResizeBound: false
    });
});
person cabezud    schedule 31.01.2014
comment
Я думаю, что проблема с этим способом заключается в том, что (1) он не только переставляет блоки, но и настраивает кладку с нуля, вызывая функцию настройки (2) это делается каждый раз, когда срабатывает событие изменения размера, что чего я хотел избежать. (smartresize.masonry срабатывает только в том случае, если прошло несколько миллисекунд без изменения размера браузера). - person frozenkoi; 01.02.2014