Masonry.js travaillant avec le HTML statique mais pas le contenu ajouté dynamiquement

Question

J'ai une page using maçonnerie.js pour paver les divs dans une disposition de type pinterest.

Les travaux de css et un script très bien si j'utiliser le HTML statique, mais si j'utilise une fonction pour charger le contenu puis la mise en page de maçonnerie n'est pas appliquée

Cela fonctionne (quand je mets directement le code HTML dans le .grid div)

<script type="text/javascript"> 
$(document).ready(function() { 

    var $grid = $('.grid').masonry({ 
    // set itemSelector so .grid-sizer is not used in layout 
    itemSelector: '.grid-item', 
    // use element for option 
    columnWidth: '.grid-sizer', 
    percentPosition: true, 
    gutter: 10 
    }) 

    // layout Masonry after each image loads 
    $grid.imagesLoaded().progress(function() { 
    $grid.masonry('layout'); 
    }); 
    }); 
</script> 

Cependant quand j'ajoute la fonction ci-dessous qui charge exactement le même code HTML dans .grid div style de maçonnerie ne fonctionne pas:

<script type="text/javascript"> 
$(document).ready(function() { 
    var track_load = 0; //total loaded record group(s) 
    var loading = false; //to prevents multipal ajax loads 
    var total_groups = <?php echo $total_groups; ?>; //total record group(s) 
    var leagueid = <?php echo "1";?>; 
    $('.grid').load("league_news1.php", {'group_no':track_load,'leagueid':leagueid}, function() {track_load++;}); //load first group 
    }); 
</script> 

y at-il aw Est-ce que je devrais courir ceci? J'ai essayé de placer le chargeur de contenu en premier puis en maçonnerie mais cela ne fonctionne pas. La maçonnerie doit-elle vérifier que le contenu est chargé en premier? Si c'est le cas, comment? Devrais-je utiliser autre chose que document.ready?

Merci d'avance pour toute aide avec celui-ci!

Answer 1

Une fois que vous avez chargé le contenu, vous devez alors exécuter la fonction de maçonnerie dans le rappel:

$('.grid').load("league_news1.php", 
       {'group_no':track_load,'leagueid':leagueid}, 
       function() { 
        track_load++; 
        var $grid = $('.grid').masonry({ 
          // set itemSelector so .grid-sizer is not used in layout 
          itemSelector: '.grid-item', 
          // use element for option 
          columnWidth: '.grid-sizer', 
          percentPosition: true, 
          gutter: 10 
         }) 

         // layout Masonry after each image loads 
         $grid.imagesLoaded().progress(function() { 
          $grid.masonry('layout'); 
         }); 
        }); 
       } 
); //load first group