首次加载时Masonry布局异常问题求助

这不是Masonry的已知Bug，本质是Masonry初始化时机过早：页面首次加载时，ACF Gallery输出的图片还没完全加载完成，Masonry只能根据图片的占位尺寸（或默认0尺寸）计算布局，导致元素重叠；刷新页面时图片已在浏览器缓存，加载速度快，Masonry初始化时能拿到图片实际尺寸，所以布局正常。

针对ACF Gallery + Bootstrap 5 + Masonry的场景，推荐以下几种解决方式：

1. 用imagesLoaded插件配合初始化 #

Masonry官方推荐用imagesLoaded监听图片加载状态，等所有图片加载完成后再初始化布局，避免尺寸计算错误：

// 先引入imagesLoaded（可通过CDN或本地引入）
$('.masonry-container').imagesLoaded(function() {
  // 初始化Masonry
  $('.masonry-container').masonry({
    itemSelector: '.grid-item',
    columnWidth: '.grid-sizer',
    // 其他配置项
  });
});

2. 提前设置图片的宽高属性 #

利用ACF Gallery返回的图片尺寸数据，给<img>标签手动添加width和height属性，让浏览器提前预留正确的空间，Masonry初始化时就能基于正确尺寸计算：

// ACF Gallery循环输出示例
$gallery = get_field('your_gallery_field');
if( $gallery ): ?>
  <div class="masonry-container">
    <?php foreach( $gallery as $image ): ?>
      <div class="grid-item">
        <img src="<?php echo esc_url($image['url']); ?>" 
             alt="<?php echo esc_attr($image['alt']); ?>"
             width="<?php echo esc_attr($image['width']); ?>"
             height="<?php echo esc_attr($image['height']); ?>" />
      </div>
    <?php endforeach; ?>
  </div>
<?php endif; ?>

3. 监听窗口加载事件延迟初始化 #

如果不想额外引入插件，也可以把Masonry的初始化代码放在window.load事件里，确保所有资源（包括图片）加载完成后再执行：

$(window).on('load', function() {
  $('.masonry-container').masonry({
    itemSelector: '.grid-item',
    // 配置项
  });
});

你之前切换到ACF Repeater正常，大概率是因为Repeater里的图片输出逻辑可能默认设置了宽高，或者图片加载时机刚好匹配了Masonry的初始化时机，本质还是图片尺寸的问题。

内容的提问来源于stack exchange，提问作者quinox