將div附加到動態網格佈局

Question

我使用這個jquery插件http://packery.metafizzy.co/來創建動態網格佈局。該插件工作完美。

的問題是：

我想創建一個選項，以添加click事件的動態網格。如果我手工編寫網格的html代碼，那麼網格顯示完美，但如果我使用jquery將網格代碼附加到我的模板佈局，那麼網格從佈局的頂部顯示，並且插件似乎不會調整網格位置。

您可以檢查我的代碼，看到了問題的住在這裏：http://jsfiddle.net/A7ubj/2/

我覺得插件未調整電網，因爲我的jQuery追加代碼正在對頂格座。

你能告訴我如何追加網格，使插件可以完美地調整網格嗎？

這是我如何追加：

$(function(){ 

$('#myID').click(function(){ 
$("#container").append($('<div class="item diff">Grid</div>')); 

    }); 

}); 

這是我的全部代碼：

JS：

<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script> 
<script src="packery.pkgd.min.js" type="text/javascript"></script> 

<script> 
$(document).ready(function() { 

    var $container = $('#container'); 
    // initialize 
    $container.packery({ 
    itemSelector: '.item', 
    gutter: 10 
    }); 
}); 

</script> 

<script> 
    $(function(){ 
    $('#myID').click(function(){ 

    $("#container").append($('<div class="item diff">Grid</div>')); 

    }); 

    }); 
</script> 

CSS：

#container{ 
    background-color:#F00; 
    width: 1130px; 
    margin:0px auto; 
} 

.item { width: 275px; background-color:#0C0;} 

.item.w2 { width: 560px; background-color:#036; } 

.diff{ 
    min-height:300px; 
} 

.diff2{ 
    min-height:250px;  
} 

HTML：

<button id="myID">Click</button> 

<div id="container"> 
    <div class="item diff">Grid</div> 
    <div class="item w2 diff2">Grid</div> 
</div> 

Answer 1

您可以調用packery.reload（），或者在附加圖像並計算每個新圖像位置後再次使用packery初始化函數。我使用砌體插件和masonry.reload（）。

更新：爲了與infinitescroll砌築工作中使用一個回調函數：How to enable infinite scrolling with masonry?

這是從我的網站代碼。我使用jQuery模板和前置。你可以看到它在前置後調用砌體（'重新加載'）。它也從新的集裝箱開始砌築。它還糾正每幅圖像的寬度和高度，因爲我認爲砌體中存在錯誤。我認爲這不是真正需要的，因爲我不緩存磚塊，但是當我需要顯示一個新類別時，我重建了整個容器。在你的例子中，你物理地添加一塊磚，但我不明白爲什麼它不起作用。結果是一樣的，但並不那麼幹淨。

$j.getJSON($j("#tag") function(response) 
    { 
     // Start masonry animated 
     if (response && response.length) 
     { 
     var container = $j('#container'); 
     container.masonry({ 
      itemSelector: '.brick', 
      columnWidth: brick_width, 
      isAnimated: !Modernizr.csstransitions 
     }); 
     boxCount = response.length; 
     counter = 0; 
     $j.each(response, function(idx, ele) 
     { 
      container.prepend($j("#brickTemplate").tmpl(ele)).masonry('reload'); 
     } 
     container.imagesLoaded(function() 
     { 
      $j("#brick").each(function() 
       { 
       var content = $j(this).find(">div"); 
       var height = $j(this).find("img").attr("height"); 
       if (height == undefined) 
       { 
        content.css({ 
        height: "300px" 
        }); 
       } else { 
        content.css({ 
        height: height 
        }); 
       } 
       // bricks fade in 
       $j(this).delay(Math.floor(Math.random() * 1600)).fadeIn('slow'); 
       // Bind Mousemove 
       $j(this).mousemove(function() 
       { 
        ..... 
       } 
      } 
     }  
     }