javascript - masonry 元素降低不透明度而不是隐藏

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 元素仍然占用空间(因为 masonry 项是 position: absolute，我猜)。

我该如何解决这个问题？如何隐藏所有元素重新组合的 masonry 元素，而不是降低它的不透明度？

Answer 1

您可以先对要隐藏的元素使用 display: none 然后再隐藏像这样在你的容器上再次调用 masonry :

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

或者

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

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

这样，使用 display:none 时，您不需要的元素将从流程中移除，并且调用布局将相应地重新排列您剩余的元素。

编辑 Codepen example