Masonryの再配置をjQueryのウィンドウリサイズトリガーで発生させる。

動的なコンテンツを配置して、（高さが変わるようなもの）Masonryでグリッドの配置をやり直す際、上手くいかなかったので備忘録です。

Masonryのリセット

Masonryはブロック状の要素をレンガのように並べ替えてくれるjQueryプラグインですが、リセットのタイミングや動的コンテンツとの組み合わせで、きちんと並べ替えを行ってくれないことがあります。

通常は以下の様なコードで並べ替えのリセットを行います。

function Masonry_Reset() {
$('#masonry_container').masonry({
itemSelector : '.item',
columnWidth : 230,
isAnimated : true,
isFitWidth : true,
animationOptions: {
duration: 300
}
});
}

リセット処理の実行タイミングが問題

リセットしても並べ替えが起こらない場合は、おそらくjQueryの処理が同期していないためです。

私の場合、見出しのCSSクラスを入れ替えただけで、上手くいっていたリセット処理が実行できなくなりました。
CSSとどう関係していたのか分かりませんでしたが…

ウインドウのリサイズトリガーを発生させる

このような場合、ウインドウのリサイズトリガーを発生させることで解決できます。
以下のコードでトリガーを発生させます。

$(window).trigger('resize')

追加後は以下の様になります。

function Masonry_Reset() {
$('#masonry_container').masonry({
itemSelector : '.item',
columnWidth : 230,
isAnimated : true,
isFitWidth : true,
animationOptions: {
duration: 300
}
});
$(window).trigger('resize')
}

よく見かけるのはウインドウリサイズをトリガーにする方法ですが、このページはjQueryでトリガーを発生させる方法です。

ちなみに以下のコードでウインドウリサイズをトリガーに処理を実行させます。

$(window).resize(function() {
// ウインドウリサイズ後の処理
});

以上、jQueryによるウィンドウ・リサイズトリガーの発行方法でした。

by T.Y.