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插件和masonry.reload（）。

更新：要使砌体与infinitescroll一起使用，请使用回调函数：How to enable infinite scrolling with masonry?

以下是我网站上的代码。我使用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()
                {
                  .....
                }
             }
         }    
      }

将div添加到动态网格布局

1 个答案: