2011-12-21 15 views
1

レイアウト用にMasonryを使用しています。ブラウザのウィンドウがサイズ変更されると、Masonryがレイアウトをやり直す前にいくつかの計算を実行したいと思います。Masonryがサイズ変更する前にコードを実行する方法

これまで、jquery.masonry.jsファイルを変更してオプションにコールバック関数を追加することで、これを実行できました。しかし、私は石工のコードを変更することなくそれを行うことを好むでしょう。

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

、その後doPreResizeで、それは私が行う必要があるものは何でも:追加

オプションは、(石工INIT)は次のようです。 .jsファイルでの変更は、(バージョンv2.0.110927でライン293に近い)resize機能である:

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

私が何をしたいのですがどのようなfalseに設定isResizableオプションで、石積みを初期化することで、その後、スマートなサイズ変更イベントを維持しながら、半手動でサイズ変更をトリガーします。

「smart resize」イベントを設定して、resizeLayoutなどの関数を呼び出すことはできますか?私が欠けている何

function resizeLayout(event) { 
    //do precalculations 

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

isResizabletrueのセットアップ方法、それは常にトリガされるのではなく、石積みのと同じように行われるようにサイズ変更イベントをにあるんときです。

答えて

1

私はこのようなイベントを設定することができます。

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

をしかし、それはレンガが唯一の再配置されているフリーメーソンの最適化を失った場合、コンテナの変更に収まるカラムの数。代わりに私が使用する場合

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

documentedではない内部関数を使用します。

0

メーソンリーには、bind/resizeイベントへのバインド解除オプションがあります。

私は同じ問題を抱えていましたが、resizeイベントにmasonry 'unbound'を初期化し、同様の方法でmasonryという名前のresize関数を作成しましたが、最初に実行したいコードの後に​​修正しました。私は物事を行うに問題がこの方法は、それが唯一のブロックを再配置しないこと(1)ですが、セットアップ機能を呼び出すことで、最初からすべての上に石材を設定します(2)それが毎回行われていると思い

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

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

私が避けたいイベントトリガーをサイズ変更してください。 ( 'smartresize.masonry'は、ブラウザのサイズを変更せずに数ミリ秒が経過した場合にのみトリガされます)。 – frozenkoi

関連する問題