单击更改砌体列

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。看，您不需要重新初始化整个插件：只需命令它根据网格容器的新尺寸使用现有规则重新布局现有项目。

按照目前的方式，首先再次调用插件（使用容器的 existing 样式进行所有计算），然后才更改 max-width 的网格。第二次点击正常，因为尺寸已经更改。

Answer 2

在网格砌筑之前改变宽度）

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

单击更改砌体列

Changing Masonry columns on click

javascript

css

jquery

masonry