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

Question

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

有我的CSS代码：

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

我已经尝试将 opacity 参数写成 display: none，但是 masonry 项目仍然采用 space（因为 masonry 项目与 position: absolute，我猜）。

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

Answer 1

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

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

或

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

也就是说，如果您使用的是 jQuery。如果您使用的是普通 JavaScript，只需执行相同的操作即可。

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

Masonry item lower opacity instead of hiding