Article From:https://segmentfault.com/q/1010000011358536
Question:

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 = data.data;
    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>' +
                    '</figure>';
        }
        $("#grid").html(html);
        var $grid = $('#grid').imagesLoaded( function() {
            $grid.masonry({
                itemSelector: ".gridItem"
            });
        });
        $grid.masonry('reloadItems')
        
    }
}

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: https://codepen.io/desandro/p…

Leave a Reply

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