クリック時の石積みの列を変更する

Question

jQueryでスクリプトを使用して、列の石積みの数を変更しようとしています。このスクリプトは、Masonryコンテナの最大幅を減らし、1つの列のみを表示させます。私の変更を完了させるためにダブルクリックする必要があるので、Scriptはほぼ正常に機能します。 ¿ワンクリックで作ることは可能ですか？

これは私のスクリプトです：

$('.grid').masonry({ 
    itemSelector: '.grid-item', 
    columnWidth: '.grid-sizer', 
    percentPosition: true, 
    gutter: 24, 
}); 

$(document).ready(function() { 
    $('.button-one').on('click', function() { 
    $('.grid').masonry({ 
     itemSelector: '.grid-item', 
     columnWidth: '.grid-sizer', 
     percentPosition: true, 
     gutter: 24, 
    }); 

    $('.grid').css({'max-width': '600px'}); 
    }); 
}); 

私はすべてのファイルとCodepenデモを持っている：

$('.button-one').on('click', function() { 
    $('.grid').css({'max-width': '600px'}) 
      .masonry('layout'); 
}); 

Demo：これを行うには

Demo

Answer 1

可能な方法の1つ。プラグイン全体を再初期化する必要はありません。グリッドコンテナの新しいディメンションに基づいて、既存のアイテムを既存のルールで再レイアウトするように指示するだけです。

それが立って仕方、プラグインは最初の（コンテナの既存スタイルを使用して、すべての計算を行う）を再度呼び出して、それだけであとは、グリッドのmax-widthを変更されます。 2回目のクリックは、寸法がすでに変更されているので正常に機能します。