“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>
WordPress ???? Masonry? ???? ??? ?? ? ???? ?????.
https://www.customfitwebdesign.com/wordpress? ?? ????? ???? ??/
??: Masonry? ??? WordPress? ??( wp-includes/js/masonry.min.js )? ???? ????. ? WordPress ??? Masonry?? ImagesLoaded(imagesloaded.min.js)? ???? ????.