点击更改砌体列

Question

我试图在jQuery中用脚本更改砌体的列数。这个脚本减少了砌体容器的最大宽度，只强制显示一列。脚本工作得很好，因为我需要双击才能完成我的更改。 ¿是否有可能只需点击一下就可以完成？

这是我的脚本：

$('.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演示的所有文件：

Demo

Answer 1

一种可能的方式做到这一点：

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

Demo 。请参阅，您不需要重新初始化整个插件：只需根据网格容器的新维度命令它使用现有规则重新布局现有项目即可。

它所代表的方式，插件首先再次调用（使使用现有风格的容器的所有计算），只有经过您更改网格的max-width。第二次点击工作正常，因为尺寸已经改变。