php 使用ACF，wpfeatherlight和WordPress的砌体网格。

Posted 2021-05-05

<style>
.scree_grid:after {
    content: '';
    display: block;
    clear: both;
}

.grid_sizer,
.grid_item {
    width: calc(33.333% - 20px);
}

.grid_item {
    float: left;
    margin-bottom: 10px;
}

.grid_item img {
    display: block;
    width: 100%;
}
</style>

<div class="scree_grid" data-featherlight-gallery
      data-featherlight-filter="a">
<?php $images = get_field('scree_gallery');
if( $images ): ?>
    <div class="grid_sizer"></div>
  <?php foreach( $images as $image ): ?>
    <div class="grid_item">
      <a href="<?php echo $image['url']; ?>">
        <img src="<?php echo $image['sizes']['medium']; ?>" alt="<?php echo $image['alt']; ?>" />
      </a>
    </div>
  <?php endforeach; ?>
<?php endif; ?>
</div>

<?php get_sidebar(); ?>
<?php if( get_field('scree_gallery') ): ?>
<script type="text/javascript">
jQuery(function($){
    var $grid = $('.scree_grid').imagesLoaded( function() {
      $grid.masonry({
        itemSelector: '.grid_item',
        percentPosition: true,
        columnWidth: '.grid_sizer',
        gutter: 10
      }); 
    }); 
});
</script>
<?php endif; ?>