0

我正在使用这个 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>' ) );

  });

});

这是我的整个代码：

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

1 回答 1

1

您可以调用 packery.reload() 或在附加图像后再次使用 packery 初始化函数并计算每个新图像位置。我使用 masonry 插件和 masonry.reload()。

更新：要使砌体与无限滚动一起使用，请使用回调函数：如何使用砌体启用无限滚动？

这是我网站上的代码。我使用 jquery 模板并预先添加。你可以看到它在 prepend 之后调用了 masonry('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()
                {
                  .....
                }
             }
         }    
      }
于 2013-09-27T22:09:43.420 回答