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

【问题标题】：How to make isotope columnWidth work when first item is 2x the width of other items?当第一项是其他项宽度的 2 倍时，如何使同位素 columnWidth 起作用？
【发布时间】：2016-02-12 04:11:25
【问题描述】：

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

第一项打破砌体布局

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

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

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

是否有可能例如：

让同位素从具有 1x 宽度的第二项中获取 columnWidth？
做一些修改，所以我实际上将一个 1x 宽的项目作为第一个项目，但会使用 display:none 或其他设置隐藏它？
将 Isotope columnWidth 设置为第一项的宽度（即 2 倍宽）减去 10 像素并除以 2？

【问题讨论】：

标签： jquery css jquery-isotope

【解决方案1】：

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

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

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

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

【讨论】：

这似乎是一个完美的解决方案，我马上试试。谢谢！
我建议在 $(window).load 而不是 $(document).ready 上进行初始化，以确保在 jQuery 尝试之前已经加载了可能影响元素大小的样式表和图像/其他资源访问宽度值。通常我将同位素与图像一起使用，因此我总是在 window.load 中将其初始化为 jQuery imagesLoaded 插件的回调（在某处的同位素文档中有更多信息/代码示例）。
我试过这个，似乎这有同样的问题。我现在有 var colWidth = $('.column-width-isotope-element').width();我正在打印出colWidth。它检查具有该类的第一个项目（它也有一个 .2x 类并且是 2x 宽）并从该类中获取值。
如果我尝试从页面中没有出现的 CSS 类中获取值，它不会返回任何内容。是否可以直接从 CSS 中获取值，而不是从具有该类的项目出现页面中获取值？
您可以在 JS 中模拟媒体查询，方法是获取窗口宽度，然后使用一些反映 CSS 媒体查询的条件语句根据该宽度设置列宽。据我所知，您不能直接从 JS 解析样式表。或者您可以在 DOM 中添加一个“虚拟元素”，其宽度设置为与列宽相同（包括媒体查询），然后在测量其大小并设置变量后立即使用.remove() 将其删除。跨度>

【解决方案2】：

我正在使用同位素 jquery 插件 v2.2.2 并遇到了这个问题。我添加了一个 CSS，它对我有用。

.itl-portfolio-masonry:after {
    content: '';
    display: block;
    clear: both;
}

【讨论】：