延迟加载和砌体

Question

我正在努力让这个布局按照我想要的 WordPress 博客的方式工作。我不明白为什么 Lazyload 会导致整个砌体重叠并加载到同一个位置而不是网格中。当我删除 Lazyload 时，布局会像砌体网格一样运行，并带有叠加悬停。

第二个问题是这段代码：

.fade {
  animation-name: fade;
  animation-duration: 2s;
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
}

我不明白为什么我无法移除底部未使用的支架。当我移除它时，整个砌体都不起作用，它变成了一个完整的烂摊子。

谁能指教这两个问题？谢谢！

此外，如果您调整 window 大小或将您的移动设备左右翻转，砌体网格显示正常。

更新：所以我发现八月份发布的 WordPress 5.5 包括 LazyLoad！届时将再次重新实现 LazyLoad。

Answer 1

对于您的 lazyload 和 mansory 问题，“伪造”或“模拟”window 的大小调整可能是您的一个可能解决方案。网格在调整大小后工作正常，因此它可以是触发该事件以使您的代码正常工作的一种方式。

您可以使用纯 javascript，在 wordpress 中您可以使用较短的 jQuery 版本：

使用纯Javascript:

var simulateResize = new Event('resize');
window.dispatchEvent(simulateResize );

使用jQuery:

$(window).trigger('resize');

确保将代码放在页面底部，尤其是必须将其放在生成网格元素和内容的代码之后。

对于你的CSS问题，@keyframes规则的正确使用方法是：

@keyframes mymove {
  from {top: 0px;}
  to {top: 200px;}
}

所以你的代码是正确的，最后的 } 是不必要的。如果删除它导致您的代码崩溃，您的 .fade 代码周围可能有一些@media 规则，例如：

@media only screen and (max-width: 600px) {}

如果它打开但不关闭，就会导致问题。

Lazyload and Masonry