Masonry-Layout搭配imagesLoaded在Safari布局错乱解决方法

现有代码核心问题 #

• 给Masonry脚本添加了async异步加载属性，脚本加载执行顺序不受控，Safari对异步脚本的时序处理和其他浏览器存在差异，极易出现初始化时依赖未就绪的问题
• 同时使用data-masonry属性自动初始化、手动JS初始化两套Masonry触发逻辑，双重初始化会导致布局计算冲突，放大Safari下图片加载前高度为0的计算偏差
• 手动初始化时未明确指定子项选择器、列宽参考规则，也没有等待DOM完全就绪就执行逻辑，Safari会将DOM中的空白文本节点误判为布局子项，直接导致位置错乱

修复后完整代码 #

画廊PHP模板部分 #

<div class="row grid" id="gallery-masonry">
<?php 
$images = get_field('gallery');
$size = 'large';
if( $images ): ?>       
    <?php foreach( $images as $image_id ): ?>
    <div class="col-md-6 mb-3 gallery-item">            
        <div id="post-<?php the_ID(); ?>" class="card rounded-0">  
            <?php echo wp_get_attachment_image( $image_id, $size, "", ["class" => "card-img-top rounded-0","alt"=>""]); ?>
        </div>
    </div>   
    <?php endforeach; ?>
<?php endif; ?>
</div>

注意：已经移除了原DOM上的data-masonry自动初始化属性，给每个瀑布流子项加了gallery-item类用于精准选择

脚本引入部分 #

<!-- 按依赖顺序加载脚本，移除Masonry的async属性保证执行时序 -->
<script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous"></script>

初始化逻辑 #

<script>
document.addEventListener('DOMContentLoaded', function() {
    const grid = document.querySelector('.grid');
    if (!grid) return;

    // 所有图片资源加载完成后再初始化Masonry
    imagesLoaded(grid, function() {
        new Masonry(grid, {
            percentPosition: true,
            itemSelector: '.gallery-item',
            columnWidth: '.col-md-6'
        });
    });

    // 窗口尺寸变化时触发布局重排，兜底适配Safari渲染偏差
    window.addEventListener('resize', function() {
        const masonryInstance = Masonry.data(grid);
        if (masonryInstance) masonryInstance.layout();
    });
});
</script>

该初始化逻辑采用原生JS编写，不依赖jQuery，不会和WordPress默认的jQuery noConflict模式产生冲突，同时明确指定了布局规则，避免Safari的节点解析差异导致的计算错误。

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