Appending div to dynamic grid layout

Question

I am using this jquery plugin http://packery.metafizzy.co/ to create a dynamic grid layout. The plugin is working perfectly.

The problem is :

I am trying to create an option to add a dynamic grid on click event. If I hand code the html code for grid then the grid shows up perfectly but if I append the grid code to my template layout using jquery then the grid shows up from the very top of the layout and the plugin doesn't seem to adjust the grid position.

You can check my code and see the problem live here: http://jsfiddle.net/A7ubj/2/

I think the plugin is not adjusting the grid because my jquery append code is making the grid seat on the top.

Could you please tell me how to append the grid so that the plugin can adjust the grid perfectly?

This is how I am appending:

$(function(){

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

  });

});

And this is my entire code:

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

You can call packery.reload() or just use the packery initialization function again after you have append the images and to calculate every new image position. I use the masonry plugin and masonry.reload().

Update: To make masonry work with infinitescroll use a callback function: How to enable infinite scrolling with masonry?

Here is the code from my website. I use jquery templates and prepend. You can see that it call masonry('reload') after the prepend. It also init masonry from the new container. It also correct the width and the height of each image because I think there is an error in masonry. I think it's not really what you need because I don't cache the brick but I rebuild the entire container when I need it to show a new category. In your example you physically add a brick but I don't understand why it didn't work. The result is the same but not so clean.

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