jquery - 当第一项是其他元素宽度的 2 倍时，如何使同位素 columnWidth 工作？

Question

http://isotope.metafizzy.co/docs/help.html说:

第一项打破了 Masonry 布局

使用 Masonry 布局模式如果您遇到重新调整第一个元素的大小，而所有其余元素不再适合网格的问题，您很可能需要设置 columnWidth 选项。如果没有设置 columnWidth，Masonry 布局模式将使用第一个元素的宽度作为其列的大小。

$('#container').isotope(
  masonry: {
    columnWidth: 220
  }
});

这就是我目前正在做的事情。但是，我希望有一些更改 columnWidth 的 CSS 媒体查询。因此，如果我的第一个 Isotope-item 具有正常的 1x 宽度，我可以只在 CSS 中指定元素的宽度，Isotope 将从那里获取 columnWidth 并工作。但是因为我的第一个元素有 2 倍的宽度，我必须像上面的代码一样指定列宽，当然我不能再用 CSS 改变它。

那么有没有可能例如:

• 让 isotope 从具有 1 倍宽度的第二项中获取 columnWidth？
• 做一些修改，这样我实际上会有一个 1 倍宽的元素作为第一个元素，但会设置用 display:none 或其他方式隐藏它？
• 将 Isotope columnWidth 设置为第一项的宽度(2 倍宽)减去 10 像素并除以 2？

Answer 1

您可以只使用 CSS 和媒体查询来设置元素的大小，然后在 Javascript 中访问该值并使用它来设置列宽:

var colWidth = $('.column-width-isotope-element').width();

$('#container').isotope(
  masonry: {
    columnWidth: colWidth
  }
});

这样，媒体查询将在 isotope 初始化之前被处理，然后它读取列宽的值(将 .column-width-isotope-element 替换为您的选择器用于单列宽度同位素元素)并使用该属性初始化同位素。