imageLoaded를 사용하여 Safari에서 Masonry-Layout 작업을 시도 중입니다.
“Masonry-Layout”과 결합된 Bootstrap 5를 사용하여 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>