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