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

【问题标题】：Bootstrap 5 + Masonry + Fancybox gallery getting destroyed when uploaded to hostingBootstrap 5 + Masonry + Fancybox 画廊在上传到主机时被破坏
【发布时间】：2021-12-03 12:03:05
【问题描述】：

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

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

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

Github 链接：https://m-ribero.github.io/mubles-ballena/galeria.html

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

gallery destroyed

gallery destroyed 2

【问题讨论】：

您好，我认为您可以通过开发人员控制台打开它并添加有关可能的资产加载错误的信息，从而获得很多有用的信息？它可以为您提供有关问题所在的一个很好的提示。或者甚至可能发布一个网址供某人查看？导致这种行为的原因可能有很多。问候
非常感谢洛伦佐。在这里我有一个 github 链接：m-ribero.github.io/mubles-ballena/galeria.html 据我所见，似乎没有出现任何加载错误，它有时只是加载错误，与按预期工作时相比，我看不到任何差异或错误.在移动设备中，它甚至更频繁地被破坏。

标签： layout fancybox bootstrap-5 masonry lightgallery

【解决方案1】：

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

【讨论】：

好像是这样。你对我如何确保我的 CSS 在 Masonry 之前加载有什么建议吗？我一直在尝试一些事情（禁用它拥有的微调器，从引导程序制作填充排水沟，根本不使用填充或边距），但无法修复它。非常感谢贾尼斯！
我不知道具体建议什么，但它似乎对你来说很好。
给所有想知道我后来做了什么的人。使用正文中的 onload 事件，我现在调用一个包装所有砌体代码的函数并延迟 1.5 秒来触发它。它现在似乎工作得很好，但最后的项目有时会超过页脚。但这只是一个细节，与我之前的相比没有什么区别。再次感谢！