3

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 设置为将第一项的宽度（即 2x 宽）减去 10px 并除以 2？
4

2 回答 2

5

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

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

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

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

于 2013-07-26T14:22:18.343 回答
0

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

.itl-portfolio-masonry:after {
    content: '';
    display: block;
    clear: both;
}
于 2016-02-11T20:11:25.560 回答