Masonry.js使用静态HTML但不动态添加内容

Question

我有一个页面使用masonry.js来平铺pinterest类型布局的div。

CSS和脚本做工精细，如果我使用静态的HTML，但如果我用一个函数来加载内容则不适用砖石布局

这工作（当我把HTML直接进入.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> 

然而，当我在下面添加它加载完全相同的HTML到.grid DIV功能砌筑风格不起作用：

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

有AW我应该运行这个？我试着把内容加载器先砌砖，但那不行。砌体应该检查内容是否先被加载？如果是这样如何？我应该使用document.ready以外的东西吗？

在此先感谢您的任何帮助！

Answer 1

一旦你已经加载的内容，你应该再运行在回调砖石功能：

$('.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