Bootstrap 5+Masonry+Fancybox图片画廊部署到托管服务后布局错乱问题

问题根因 #

你遇到的是瀑布流布局非常常见的加载时序问题：本地测试时资源加载速度极快，Masonry初始化执行前所有图片已经加载完成，能拿到准确的元素高度计算布局；线上环境资源加载存在网络延迟，Masonry初始化时图片尚未加载完成，只能按占位高度计算布局，等图片加载完成撑开元素高度后就会出现重叠、错位的问题。刷新后图片已经进入浏览器缓存，加载速度足够快，调整窗口大小会触发Masonry的reload布局逻辑，因此两种场景都会恢复正常。

解决方案 #

方案1：搭配imagesLoaded插件（官方推荐，改动最小） #

Masonry官方明确推荐配合imagesLoaded使用解决图片加载时序问题，无需替换现有Masonry组件，也不会影响Bootstrap的正常使用：

1. 引入imagesLoaded脚本
2. 调整Masonry初始化逻辑，等待容器内所有图片加载完成后再执行初始化，示例代码如下：

// 原有容器选择器替换为你实际用的选择器
const grid = document.querySelector('.grid');
imagesLoaded( grid, function() {
  // 图片全部加载完成后再初始化Masonry
  new Masonry( grid, {
    itemSelector: '.grid-item',
    // 其他你原来的Masonry配置保持不变
  });
});

方案2：提前固定图片占位尺寸，无需额外依赖 #

给所有画廊图片提前设置宽高属性或者aspect-ratio样式，提前占住对应高度，这样即使图片未加载完成，Masonry也能拿到准确的元素高度计算布局：

.gallery-item img {
  width: 100%;
  aspect-ratio: 3/4; /* 替换为你实际的图片宽高比，也可以给每个图片单独设置 */
  object-fit: cover;
}

方案3：替换为CSS原生瀑布流，完全规避JS时序问题 #

如果可以替换Masonry，直接用CSS实现瀑布流是最稳定的方案，完全不存在JS初始化的时序问题，兼容性已经覆盖绝大多数主流浏览器：

.gallery-container {
  column-count: 3; /* 可根据响应式要求调整不同屏幕下的列数 */
  column-gap: 16px;
}
.gallery-item {
  break-inside: avoid;
  margin-bottom: 16px;
}

只需要给容器和子元素加以上样式即可，删除原有Masonry的相关JS代码即可正常运行。如果对瀑布流元素的排序顺序有要求，优先选择前两个方案即可。

内容的提问来源于stack exchange，提问作者M.R. Amarillo