当第一个项目是其他项目宽度的 2 倍时，如何使同位素 columnWidth 起作用？

Question

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

第一项打破砌体布局

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

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

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

那么是否有可能例如：

• 使同位素从具有 1x 宽度的第二个项目中获取 columnWidth？
• 进行某种黑客攻击，因此实际上我将有一个 1x 宽的项目作为第一个项目，但会使用 display:none 或其他方式设置隐藏它？
• 将 Isotope columnWidth 设置为第一个项目的宽度（2x 宽）减去 10px 并除以 2？

Answer 1

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

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

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

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