同位素 JS 库 - 卡片重叠

Question

我已将同位素网格 .js 库 (https://isotope.metafizzy.co/index.html) 与我的 Wordpress 帖子集成以显示漂亮的网格：请参见下面的屏幕截图：

但是，在初始加载时（以及当我重新加载缓存时），网格项似乎重叠。请参阅下面的屏幕截图：

我已经使用 CDN 将 js 库加入队列，我可以说它在工作。我有以下代码。首先是引入帖子的循环，然后是初始化它的 Javascript 位。

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

我在 init 之后添加了这一点 javascript 应该可以解决问题，但我发现它们仍然重叠：

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

顺便说一句，我的网站在这里：http://webserver-meetandengage-com.m11e.net 它在主页的中间位置。

您认为这是因为我在同一页上包含了 javascript 吗？我应该将它包含在它自己的 .js 文件中吗？我最初尝试过这个，但我无法让它正常工作...

Answer 1

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

同位素 JS 库 - 卡片重叠

Isotope JS Library - Cards overlapping

javascript

jquery

wordpress

jquery-isotope