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

Question

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

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

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

$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

Я хотел бы инициализировать масонство с помощью isResizableдля параметра установлено значение false, а затем запускается изменение размера полуручно, сохраняя при этом событие интеллектуального изменения размера.

Можно ли настроить событие «интеллектуального изменения размера» для вызова такой функции, как 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");
});

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

Answer 2

У масонства есть опция bind / unbind к событию изменения размера.

У меня была та же проблема, но я исправил ее, инициализировав кладку 'unbound' к событию resize, а затем написав функцию изменения размера, которая вызывала эту вызываемую masonry таким же образом, но после того, как код, который я хотел, был выполнен первым.

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

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