将div附加到动态网格布局中

Question

我正在使用这个jquery插件http://packery.metafizzy.co/来创建一个动态的网格布局。这个插件工作得很好。

问题是：

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

您可以检查我的代码并在这里看到问题所在：http://jsfiddle.net/A7ubj/2/

我认为插件没有调整网格，因为我的jquery附加代码使网格位于顶部。

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

以下是我的附文：

$(function(){

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

  });

});

这是我的全部代码：

联署材料：

<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()。

Update:要使砌体与无穷大一起工作，请使用回调函数：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()
                {
                  .....
                }
             }
         }    
      }