jQuery Masonry and Ajax Append Items?

Question

I am trying to use some ajax and the jQuery Masonry plugin to add some items - but for some reason the new items aren\'t getting the masonry applied ?

I\'m using

Answer 1

Had a similar problem and instead used the following line (converted for your code). Sorry, I don't recall where I found it.

In your code replace this:

jQuery("#content").append(el).masonry( 'appended', el, true );

With this:

jQuery("#content").append(el).masonry( 'reload' );

http://masonry.desandro.com/methods.html

Answer 2

I added the following code after the append command and everything was fine:

$grid.imagesLoaded().progress( function() {
    $grid.masonry('layout');
});

The reason:

Unloaded images can throw off Masonry layouts and cause item elements to overlap. imagesLoaded resolves this issue. imagesLoaded is a separate script you can download at imagesloaded.desandro.com.

source

Answer 3

Just for future people who find this issue and the above solutions don't work for them: I found an issue with my selector and the element I added not having the same case, i.e. itemSelector was .Card but I was appending <div class="card">.

Hope this helps.

Answer 4

success: function (response) {
  if(response.length > 0) {
     var el = js(response); 
     setTimeout(function () {
       js("#masonry").append(el).masonry( 'appended', el).masonry('layout');
     }, 500);
  }
}   

works fine for me.

Answer 5

This solution works for me:-

  jQuery.ajax({
    type: "POST",
    url: ajax_url,
    data: ajax_data,
    dataType: 'json',
    cache: false,
    success: function(response) {
      if (response.length > 0) {
        var $container = $('#container');
        var msnry = $container.data('masonry');
        var elems = [];
        var fragment = document.createDocumentFragment();
        for (var x in response) {
          var elem = $(response[x]).get(0);
          fragment.appendChild(elem);
          elems.push(elem);
        }
        $container.appendChild(fragment);
        msnry.appended(elems);
      }
    }
  });

Answer 6

You are missing Masonry layout call. According to the docs you need to refresh the layout, executing .masonry() after every change (for instance .masonry('appended')):

$grid.masonry()
  .append(elem)
  .masonry('appended', elem)
  // layout
  .masonry();

(source: http://masonry.desandro.com/methods.html)