Bootstrap 5 + Masonry + Fancybox 画廊在上传到主机时被破坏

Question

我在使用 Bootstrap plus Masonry 进行布局时遇到问题。在我的电脑上试用，效果很好，但是当我将它上传到 GitHub 页面或 Godaddy 托管时，它有时会像我共享的图像一样被破坏。我买了 Lightgallery 并尝试用它代替 Fancybox 来制作照片库，以防万一出现问题，但它是一样的。

问题是 Masonry 或 bootstrap，我无法摆脱 bootstrap 但可以使用 Masonry 的替代方法。我的客户只需要类似 Pinterest 的布局。

这非常令人沮丧，因为它在上线之前一直运行良好。我尝试了很多东西，但没有任何效果。谢谢你能给我的任何想法，抱歉我的英语不好。

Github link: https://m-ribero.github.io/mubles-ballena/galeria.html

edit：非常重要的细节，它通常在重新加载或调整页面大小后得到修复，但是对于第一次有人进入那里，如果它看起来那么糟糕，它不会激励人们在网站上投入更多时间.

gallery destroyed

gallery destroyed 2

Answer 1

问题出在 Masonry 而不是 Fancybox（或任何其他灯箱替代品）。看起来它错误地计算了容器的高度。由于它在缓存资产后起作用，我猜你的砖石脚本会在加载 CSS 之前完成所有计算。因此，计算时不考虑 top/bottom 填充。