Jquery 当我加载页面时，这些div相互重叠

当页面加载时，框会以一种混乱的方式排列，尽管如果我单击其中一个按钮，它们会正确地重新排列

这是标记：

<!-- LEFT WIDGET START -->
<div class="col-xs-12 col-md-3">
    <aside>
        <!-- GAME CATEGORIES START -->
        <article>
            <nav class="categories" class="filter-group">
                <h2>Categories</h2>
                <div id="filters" class="button-group">
                    <button class="button is-checked" data-filter="*"><p>All</p></button>
                    <button class="button" data-filter=".slots"><p>Slots Games</p></button>
                    <button class="button" data-filter=".table"><p>Table Games</p></button>
                    <button class="button" data-filter=".sports"><p>Sports Games</p></button>
                    <button class="button" data-filter=".keno"><p>Keno Games</p></button>
                    <button class="button" data-filter=".scratchcard">Scratchcards</button>
                </div>
            </nav>
        </article>
        <!-- / GAME CATEGORIES END // -->
        <!-- LATEST WINNERS START -->
        <?php the_widget( 'LatestWinners_Widget' ); ?>
        <!-- / LATEST WINNERS END // -->
    </aside>
</div>


<div class="col-md-9 col-xs-12">
    <div class="isotope">
        <div class="game slots" data-category="slots">
            <ul class="games_container" id="slots"></ul>
        </div><!-- games hot -->

        <div class="game table" data-category="table">
            <ul class="games_container" id="table"></ul>
        </div><!-- games hot -->

        <div class="game sports" data-category="sports">
            <ul class="games_container" id="sports"></ul>
        </div><!-- games hot -->

        <div class="game keno" data-category="keno">
            <ul class="games_container" id="keno"></ul>
        </div><!-- games hot -->

        <div class="game scratchcard" data-category="scratchcard">
            <ul class="games_container" id="scratchcard"></ul>
        </div><!-- games hot -->
    </div>
</div>

<script>
    jQuery(document).ready(function($) {
        renderGameList('slots', '#slots', '<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/game.php');
        renderGameList('table', '#table', '<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/game.php');
        renderGameList('sports', '#sports', '<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/game.php');
        renderGameList('keno', '#keno', '<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/game.php');
        renderGameList('scratch', '#scratchcard', '<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/game.php');
    });
</script>

我怎样才能解决这个问题

提前感谢,，

---

Bruno

您可以通过在文档完全加载时触发同位素一次来解决此问题：

$(window).on("load", function() {
  $filter.isotope("layout");
})

---

谢谢，我解决了这个问题，现在我只需要弄清楚如何使主容器的高度与箱子相适应。

$(window).on("load", function() {
  $filter.isotope("layout");
})