Question

我正在尝试使用jQuery中的脚本更改Masonry列数。此脚本减少了Masonry容器的最大宽度，强制只显示一列。脚本工作得很好，因为我需要双击才能完成我的更改。 ¿只需点击一下就可以制作它吗？

这是我的剧本：

$('.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。第二次点击工作正常，因为尺寸已经更改。

Answer 2

只需在网格砌体之前更改宽度）

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

单击更改砌体列

2 个答案: