砌体项目降低不透明度而不是隐藏答案

【问题标题】：Masonry item lower opacity instead of hiding砌体项目降低不透明度而不是隐藏
【发布时间】：2017-03-16 16:58:34
【问题描述】：

我知道默认的 Masonry 行为是隐藏项目，当项目处于活动状态（选择其他类别）时，但在我的代码中，它将不透明度降低到 0.25 而不是隐藏并且所有其他项目重新组合：http://veritaswp.excellence.lt/en/photo-gallery/

这是我的 CSS 代码：

.project.inactive {
  opacity: .25 !important;
  pointer-events: none !important;
}

我已经尝试过而不是opacity 参数写入display: none，但masonry 项目仍然占用空间（因为masonry 项目与position: absolute，我猜） .

我该如何解决这个问题？如何隐藏 masonry 项目并重新组合所有项目，而不是降低它的 opacity？

【问题讨论】：

【解决方案1】：

您可以在要隐藏的项目上先使用display: none，然后像这样在您的容器上再次调用 masonry：

$(".masonry").masonry();

或者

$(".masonry").masonry("layout");

如果您使用的是 jQuery。如果您使用的是纯 JavaScript，只需执行相同操作即可。

使用display:none 时，您不需要的项目将从流程中删除，调用布局将相应地重新排序您剩余的项目。

【讨论】：