当我加载页面时，div 彼此重叠

Question

当页面加载时，框的排列方式很乱，但如果我单击其中一个按钮，它们会重新正确排列。

这是标记：

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

js:

jQuery(document).ready(function($) {

  // init Isotope
  var $container = $('.isotope').isotope({
    itemSelector: '.game',
    layoutMode: 'fitRows',
    getSortData: {
      category: '[data-category]',
    }
   });

  // filter functions
  var filterFns = {
  // show if number is greater than 50
    numberGreaterThan50: function() {
      var number = $(this).find('.number').text();
      return parseInt( number, 10 ) > 50;
    }
  };

  // bind filter button click
  $('#filters').on( 'click', 'button', function() {
    var filterValue = $( this ).attr('data-filter');
    // use filterFn if matches value
    filterValue = filterFns[ filterValue ] || filterValue;
    $container.isotope({ filter: filterValue });
  });

  // bind sort button click
  $('#sorts').on( 'click', 'button', function() {
    var sortByValue = $(this).attr('data-sort-by');
    $container.isotope({ sortBy: sortByValue });
  });

  // change is-checked class on buttons
  $('.button-group').each( function( i, buttonGroup ) {
    var $buttonGroup = $( buttonGroup );
    $buttonGroup.on( 'click', 'button', function() {
      $buttonGroup.find('.is-checked').removeClass('is-checked');
      $( this ).addClass('is-checked');
    });
  });
});

我该如何解决这个问题？

提前致谢，布鲁诺

Answer 1

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

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

当我加载页面时，div 彼此重叠

When I load the page, the divs are on top of each other

jquery

html

css

jquery-isotope