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

handgun-231696_1280
ハイ! リサです。

動的なコンテンツを配置して、(高さが変わるようなもの)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によるウィンドウ・リサイズトリガーの発行方法でした。

See you !

© oh yeah Steve!

スポンサーリンク
スポンサーリンク
スポンサーリンク

シェアする

フォローする