已经给img添加了width和height属性，为什么masonry瀑布流插件还是不能正常工作，都堆一块了

Question

已经给img添加了width和height属性，为什么masonry瀑布流插件还是不能正常工作，都堆一块了
第一次是后端渲染的，没啥问题，点击翻页后是异步渲染的，这种动态添加的元素渲染就不正常了
代码如下：

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 1

建议先看看控制台有没有报错。另外imagesLoaded是异步执行的，$grid.masonry('reloadItems')会在它之前执行。masonry官网提供了动态加载图片的示例，可以参考一下：https://codepen.io/desandro/p...