嘗試使 Masonry-Layout 在帶有 imagesLoaded 的 Safari 中工作

Question

我透過結合 Bootstrap 5 和“Masonry-Layout”，成功為 WordPress 網站實現了 Masonry-Gallery。 它運作得很好，除了在 Safari 中，佈局通常會中斷，這是一個已知問題，解決方案應該是「imagesLoaded」。 我嘗試了很多，但我只是無法在正確的位置添加所需的類別。 據我所知，程式碼如下。有人可以幫忙嗎？

<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)。