Ich versuche, Masonry-Layout in Safari mit imagesLoaded zum Laufen zu bringen

Question

Ich habe Masonry-Gallery für die WordPress-Website erfolgreich implementiert, indem ich Bootstrap 5 in Kombination mit „Masonry-Layout“ verwendet habe. Es funktioniert großartig, außer in Safari, wo das Layout oft kaputt geht. Dies ist ein bekanntes Problem und die Lösung sollte „imagesLoaded“ lauten. Ich habe viel versucht, aber es gelingt mir einfach nicht, die erforderlichen Kurse an der richtigen Stelle hinzuzufügen. Soweit ich weiß, lautet der Code wie folgt. Kann jemand helfen?

<div class="row grid" id="gallery-masonry" data-masonry='{"percentPosition": true }'>
    
<?php 
$images = get_field('gallery');
$size = 'large';
    
if( $images ): ?>       
        <?php foreach( $images as $image_id ): ?>
    
<div class="col-md-6 mb-3">            
    <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>

<!--Masonry-Layout-->
<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" async></script>


<!--ImagesLoaded-->
<script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>


<!--Script ImagesLoaded-->
<script>
var $grid = $('.grid').imagesLoaded( function() {
  // init Masonry after all images have loaded
  $grid.masonry({
    // options...
  });
});
</script>

Answer 1

请查看我关于向 WordPress 站点添加 Masonry 的帖子。

https://www.customfitwebdesign.com/如何在 wordpress 中添加砌体布局/

注意：Masonry 实际上内置于 WordPress 的核心中 ( wp-includes/js/masonry.min.js )。此 WordPress 版本的 Masonry 还包括 ImagesLoaded (imagesloaded.min.js)。