Article From:

The width and height attributes have been added to the img, and why the masonry waterfall stream plug-in still doesn’t work properly is piled up
The first time is back-end rendering, no problem, click the page is asynchronous rendering, this dynamic addition of elements rendering is not normal
The code is as follows:

success : function(data){
    var result =;
    if(result.length > 0){
        var html = "";
        for(var i = 0; i < result.length; i++){
            html += '<figure class="gridItem">' +
                        '<div class="gridItemInner">' +
                            '<div class="thumbnailGridItem">' +
                                '<img src="' + result[i].thumb + '" width="' + result[i].width + '" height="' + result[i].height + '" />' +
                            '</div>' +
                        '</div>' +
        var $grid = $('#grid').imagesLoaded( function() {
                itemSelector: ".gridItem"

Answer 0:

It is recommended to see if the console has reported any errors. in additionimagesLoadedIt is executed asynchronously.$grid.masonry('reloadItems')It will be executed before it. Masonry’s website provides an example of dynamically loading pictures, which you can refer to:…

Leave a Reply

Your email address will not be published. Required fields are marked *