height: auto; causing trouble when initiating masonry on ajax success

[markmaurerrr]

I've rebuild a little test case to show you what happens: http://dev.markmaurer.de/masonrytest/

Codepen or jsfiddle isn't working in that case, i'm sorry for that!

If you click on the button, the whole masonry content is getting loaded via ajax and getting initiated on ajax success. (Make sure you've deleted your cache when clicking the button multiple times)

If the images have the property height: auto;, the height of them is ignored by masonry while calculating the positioning values.

But if i give them a px height, everything is fine:

Ajax loading code:

 $(".btn-default").on("click",function(){

                        insert();

                    });

                    function insert(){

                            $.ajax({

                                url: "content/elements.php",
                                method: 'GET',
                                cache: false,
                                success: function(data){

                                    $(".ajaxcontent").html(data);

                                    $('.masonry').masonry({

                                        itemSelector: '.col-md-4',
                                        gutter: 10

                                    });

                                }

                            });

        }

The strange thing is, that if i initiate on page load like this:

$('.masonry').masonry({

       itemSelector: '.col-md-4',
       gutter: 10

});

Everything gets loaded fine, as you can see here: http://dev.markmaurer.de/masonrytest/elements

Any idea what i can do?

Thanks a lot again!

[vssn]

+1

[desandro]

Looks like this is an issue with unloaded images. See imagesLoaded. Try this code:

success: function(data){
    $(".ajaxcontent").html(data).imagesLoaded( function() {
        $('.masonry').masonry({
            itemSelector: '.col-md-4',
            gutter: 10
        });
    })
}

[markmaurerrr]

Solved it, thanks!

[vimal92]

Hi can you help me to add the masonry in the following ajax code for load more it is working fine but the paged section post are overlapped due to enough height to this main div (function($) { "use strict"; $(document).on('ready', function() { enablenoonajaxLoadMore(); });

function enablenoonajaxLoadMore() {
    initnoonAjaxLoadMore();
}

function initnoonAjaxLoadMore() {

        noon_tbdblogajax({
            button: '.noon_tabcat1loadmore',
            postWrapper: '.noon_entrysectioninner1',
            postItem: '.noon_entrysection'
        });
        noon_tbdblogajax({
            button: '.noon_tabcat2loadmore',
            postWrapper: '.noon_entrysectioninner2',
            postItem: '.noon_entrysection'
        });

}

function noon_tbdblogajax(args) {
    var ajaxButton = args.button,
        postWrapper = args.postWrapper,
        postItem = args.postItem;
    $(ajaxButton).click(function(e) {
        e.preventDefault();
        var element = $(this),
            target = element.attr('href'),
            loadingTextOrg = element.html(),
            loadingText = element.data('loading-text'),
            $postWrapper = $(postWrapper);
        element.html(loadingText);
        $.ajax({
            type: 'GET',
            url: target,
            success: function(data, textStatus, XMLHttpRequest) {
                var newPostItems = $(data).find(postWrapper + ' ' + postItem),
                    nextPageUrl = $(data).find(ajaxButton).attr('href');
                if (nextPageUrl) {
                    var noon_lyttext = element.text();
                    if (noon_lyttext == "Loading...") {
                        element.attr('id', 'noon_loadeddone');
                    }
                }
                else {
                    element.parent().after('<div class="noon_nopostload"><p><i class="fa fa-frown-o"></i> '+noon_fnajxobj.no_loadposttxt+'</p>');                   
                }
                if (nextPageUrl)
                    element.attr('href', nextPageUrl);
                else
                    element.parent().slideUp();
                $postWrapper.append(newPostItems);
            },
            complete: function() {
                element.html(loadingTextOrg).removeClass('noontbd_spinner');
                $postWrapper.addClass('noon_paginationexecuted');

            },
            error: function(MLHttpRequest, textStatus, errorThrown) {
                alert(errorThrown);
            }
        });
    });
}

})(jQuery);

[vimal92]

var container1 = document.querySelector('.noon_entrysectioninner1');
var msnry1 = new Masonry( container1, {
    // options
    itemSelector: '.noon_mansoryitem',       
    gutter: 30
});

please find the attached images at below

I hope you got my point and let me get out of the issue.