当网页加载完毕后，在申报单上相互

Question

Games page

的顶部加载网页时被安排在一个混乱的方式盒，但如果我点击他们正确地重新排列的按钮之一。

这是标记：

<!-- 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"); 
})