Question

I have integrated the Isotope grid .js library (https://isotope.metafizzy.co/index.html) with my Wordpress posts to display a nice grid: see screenshot below:

However, on initial load (and when I do a cache reload) the grid items seem to overlap. See below Screenshot:

I've enqueued the js library using a CDN, I can tell thats working. I have the below code. Firstly the loop to bring in the posts and then the bit of Javascript that initialises it.

<div class="container blog-card-container">
    <div class="grid">

        <?php

        $my_query = new WP_Query('cat=[14]&posts_per_page=10');

        ?>

        <?php while ($my_query->have_posts()) : $my_query->the_post(); $do_not_duplicate = $post->ID;?>

                    <div class="grid-sizer"></div>

                    <!-- Conditional a Link =========================================== -->

                    <?php 
                      if(get_field('quote') == ''){
                      $yourTag = "<a href='".get_the_permalink()."'>" ;
                      } else {
                      $yourTag = "";
                      }
                    ?>


                    <div> <?php echo $yourTag; ?> </div>
                            <div class="grid-item">

                                <div class="client-header-logo-card" style="background-color: <?php the_field('client_brand_colour'); ?>;">
                                    <?php 

                                    $image = get_field('client_logo');

                                    if( !empty($image) ): ?>

                                        <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />

                                    <?php endif; ?>
                                </div>

                                <div class="clients-card-block">

                                    <h2><?php the_title(); ?></h2>

                                    <?php if( get_field('quote') ): ?><p class="client-quote"><span style="color:<?php the_field('client_brand_colour'); ?>; font-weight:bold;">&ldquo; </span><?php the_field('quote'); ?><span style="color:<?php the_field('client_brand_colour'); ?>;font-weight:bold;"> &rdquo;</span></p><?php endif; ?>


                                    <?php if( get_field('quote_name') ): ?><p class="client-name" style="color:<?php the_field('client_brand_colour'); ?>;"><?php the_field('quote_name'); ?></p><?php endif; ?>
                                    <?php if( get_field('quote_position') ): ?><p class="client-position" style="color:<?php the_field('client_brand_colour'); ?>;"><?php the_field('quote_position'); ?></p><?php endif; ?>



                                    <?php if( get_field('button_text') ): ?>
                                        <a class="btn btn-sm btn-client-archive" href="<?php the_permalink(); ?>" style="background-color:<?php the_field('client_brand_colour'); ?>;" role="button"><?php the_field('button_text'); ?></a>
                                    <?php endif; ?>

                                    <?php if( get_field('video_url') ): ?>
                                        <div class="embed-container">
                                            <?php the_field('video_url'); ?>
                                        </div>
                                    <?php endif; ?>                 

                                </div>
                            </div>
                        </a>


        <?php endwhile; ?>

    </div>
</div>




<script type="text/javascript">

// vanilla JS
var grid = document.querySelector('.grid');
var iso = new Isotope( grid, {

  itemSelector: '.grid-item',
  percentPosition: true,
  masonry: {
    columnWidth: '.grid-sizer',
    gutter: 20
  }
});

// layout Isotope after each image loads
$grid.imagesLoaded().progress( function() {
  $grid.isotope('layout');
});

</script>

I included this little bit of javascript after the init which is supposed to fx the issue, but I find them still overlapping:

// layout Isotope after each image loads
$grid.imagesLoaded().progress( function() {
  $grid.isotope('layout');
});

My site is here by the way: http://webserver-meetandengage-com.m11e.net its around halfway down the homepage.

Do you think this is because I've included the javascript on the same page? Should I include it in it's own .js file? I tried this initially but I couldn't get it to work properly...

Answer 1

似乎您没有在页面上包含 imagesLoaded 插件。请确保正确添加插件。希望能解决重叠的问题。你应该在循环之外添加<div class="grid-sizer"></div>。

Images Loaded Missing

Isotope JS Library - Cards overlapping

1 个答案: