jquery - 石工コンテナのサイズ変更

Question

Masonry を使用して、ポートフォリオ サイトの画像を整理しています。コンテナーのサイズが変更された場合、ガターから幅を変更する方法はありますか?

どうもありがとう！

バート

Answer 1

探しているものの簡単な解決策は、jQuery $(window).resize() イベント リスナーを用意し、ウィンドウの .width() をチェックすることです。幅によっては、完全に別の呼び出し。私はそれを試してみましたが、それはかなりうまくいきます...

var $gridElement = $(".grid-elements").masonry({
     columnWidth: 150,
     gutterWidth: 12,
});

$(window).resize(function(){
    var width = $(window).width();

    if(width > 1000) {
         console.log('greater than 1000');
         $gridElement.masonry({
              columnWidth: 150, // different column width here
              gutterWidth: 6, // different gutter width here
         });
    } else if (width < 1000) {
         console.log('less than 1000');
         $gridElement.masonry({
              columnWidth: 150, // different column width here
              gutterWidth: 12, // different gutter with here
         });
    }
});

ご覧のとおり、「.grid-elements」jQuery の選択を .masonry() 呼び出しでキャッシュし、.resize() ハンドラー関数内でウィンドウの幅をチェックして、.masonry( ) メソッドと新しいオプション セット。

また、上記のコードはデバウンスしないため、サイズ変更するピクセルごとに .masonry() を呼び出すことに注意してください。そのため、このスタックの質問に対する回答を確認できます。