javascript - 单击更改 masonry 列

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 一个网格。第二次点击正常，因为尺寸已经更改。