Question

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

第一项打破砌体布局

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

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

这就是我目前正在做的事情。但是，我想要一些改变columnWidth的CSS媒体查询。因此，如果我的第一个Isotope项目具有正常的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替换为您的选择器用于单列宽度同位素元素）并初始化同位素与该属性。

Answer 2

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

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

当第一项是其他项目宽度的2倍时，如何使同位素列宽工作？

2 个答案: