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

Question

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

有我的CSS代码：

opacity

我尝试过代替display: none参数写position: absolute，但 masonry 项目仍占用空间（因为 masonry 项目带{{1}我猜）。

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

Answer 1

您可以先对要隐藏的项目使用display: none，然后再使用$(".masonry").masonry(); 再次在您的容器上调用砌体，如下所示：

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

或者

display:none

那就是你正在使用jQuery。如果您使用的是纯JavaScript，请执行相同的操作。

使用Automatic HTTPS Rewrites这种方式，您的不需要的商品将从流中移除，并且调用布局将相应地重新排序您的剩余商品。

编辑 Codepen example