I am using Advanced Ajax Page Loader Plugin together with Masonry. Both work, however Maonry doesn't get applied once new content is loaded via ajax. You can see it here http://wxperimental.musicglaze.com once you first load it you can see masonry taking place (each post is separated) but than type "a" inside sidebar search and look it up. New content will be loaded via ajax and masonry will not be applied.

I tried pasting my masonry code to "Reload Code" section in settings of Advanced Ajax Page Loader plugin, but it didn't work.

My code for Masonry.

jQuery( document ).ready( function( jQuery ) {
    // Check if container exists
    if (jQuery("#content").length > 0) {
              var e = function() {
                      var e = jQuery("#content"),
                          t = function() {
                          r = function() {
                              // Some stuff for responsive layout
                              var e = jQuery(window).width();
                              if (e <= 1125) n = 1;
                              else n = 2
                          i = function() {
                              // On resize apply masonry again
                              jQuery(window).on("smartresize.MusicGrid", function(e) {
                          s = function() {
                              e.imagesLoaded(function() {

                                          itemSelector: ".article",
                                          columnWidth: function(e) {
                                              return e / n
                                          isAnimated: false

                      return {
                          init: t

          // This is to apply Masonry for jetpack infinite scroll
          jQuery( document.body ).on( 'post-load', function () {
        var jQuerycontainer = jQuery('#content');

        jQuerycontainer.masonry( 'reload' );


| improve this question | | | | |

This problem is not related to wordpress but with how javascript behave.

You need to wait until ajax call is completed then relayout. You can confirm it by putting "console.log()" in your javascript.

| improve this answer | | | | |
  • But that's the thing Advanced Ajax Page Loader has field in the settings "Reloaded Code" Which states that I should place code there that I want to execute after reload, I do that, but Masonry doesn't get applied to content laded via ajax – Ilja Jun 10 '13 at 13:12
  • hmm let me try myself. I'll come back soon – Amit Kumar Gupta Jun 10 '13 at 13:17
  • Cool, thanks I added simple thing like alert("Test"); and indeed it executes only when ajax is done loading, maybe I need to somehow edit my masonry, I'll try to experiment – Ilja Jun 10 '13 at 14:44
  • Got it fixed by doing some tests, ended up placing masonry in a separate div thanks for debug advice – Ilja Jun 10 '13 at 16:09
  • You saved my effort ;) – Amit Kumar Gupta Jun 12 '13 at 2:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.