包含图像时砌体项目重叠

Question

我正在使用AJAX请求附加包含图片的砌体项目。问题是这些项目经常重叠。我已尝试添加imagesLoaded，现在我正在使用以下代码：

$.ajax(
{
    url: 'http://www.comfyshoulderrest.com/shopaholic/rss/test.php',
    type: 'GET',
    //data: {token : "1"},
    dataType: 'html',
    success: function(data)
    {
        $container.imagesLoaded( function() {
            $('#container').append(data);
            $container.masonry('reloadItems').masonry();
        });
    },
    error: function()
    {
       alert("error");
    }
})

知道可能导致问题的原因是什么？

JSFiddle

Answer 1

在等待加载图像之前，尝试将元素附加到容器

$('#container').append(data);
$container.imagesLoaded( function() {
            $container.masonry('reloadItems').masonry();
        });