Javascript 将div追加到动态栅格布局

我正在使用这个jquery插件创建一个动态网格布局。该插件工作正常

问题是：

我正在尝试创建一个选项，以便在单击事件时添加动态网格。如果我为网格手工编写html代码，那么网格就会完美地显示出来，但是如果我使用jquery将网格代码附加到模板布局中，那么网格就会从布局的最顶端显示出来，插件似乎不会调整网格位置

您可以查看我的代码，并在此处实时查看问题：

我认为插件并没有调整网格，因为我的jqueryappend代码使网格位于顶部

你能告诉我如何添加网格以便插件可以完美地调整网格吗

我是这样附加的：

$(function(){

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

  });

});

HTML:

点击
网格
网格

您可以调用packer.reload（），或者在附加图像并计算每个新图像位置后再次使用packer初始化函数。我使用了Mashine插件和Mashine.reload（）

---

更新：要使砌体与infinitescroll一起工作，请使用回调函数：

这是我网站上的代码。我使用jquery模板和prepend。您可以看到，它在prepend之后调用massy（'reload'）。它还从新容器初始化砌体。它还修正了每幅图像的宽度和高度，因为我认为这是一个错误。我认为这并不是你真正需要的，因为我不缓存砖块，但当我需要它来显示一个新的类别时，我会重建整个容器。在您的示例中，您实际添加了一块砖块，但我不明白为什么它不起作用。结果是一样的，但不是那么干净

 $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()
                {
                  .....
                }
             }
         }    
      }

---

我想我已经找到了一个关于如何解决我的问题的教程，但是我不能很好地理解代码。你能帮帮我吗？对不起，我试过一点，但不起作用。看起来完全不同。好的，非常感谢：）。我也尝试了将近两个小时，但仍然没有运气。如果你不介意的话，我有个问题；是否可以使用砌体创建这样的布局？我计划包括一个无限滚动功能了。感谢使用infinitescroll使砖石工程工作。请使用回调函数：是的，我认为这是可能的，但我不知道具体情况。看看我的网站，它正在使用砖石。

#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;    
}

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

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

 $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()
                {
                  .....
                }
             }
         }    
      }