JQuery Masonry：通过ajax附加图像

Question

我有很多图像通过ajax加载。我正在使用砌体和延迟加载插件来显示图像。通过一个ajax调用加载所有图像导致问题和页面卡住直到所有图像都被排列，所以我加载了20张图片在第一个ajax调用中，然后立即执行此逐个ajax请求，在每个调用中获取10个图像，并通过masonry追加附加。

function getMorePhotos () {
    $.ajax({
            type    : "POST",
            url     : site_url+'controller/ajax_get_photos',
            data    : ,
            complete: function(response)
                    {
                        if (response.responseText != '0' )
                        {
                            getMorePhotos();
                        }                       
                    },
            success : function(response) 
                {
                    if (response == '0' || response == '') {

                    } else {
                        var temp = $(response).get();
                        temp.forEach(function( element, index ) {
                            $item = $(element);
                            $('#allPhoto1').find('ul.ins-view').append($item).masonry( 'appended', $item );
                            $item.find("img.lazy").lazyload({
                                effect : "fadeIn",
                                threshold : 100
                            });

                        });

                    }
                }
        });
}

这是第一次请求完成后的方法调用。

现在的问题是：第一张图像连续闪烁，直到最后一次ajax请求完成。

我觉得这不是一个好的解决方案。有人建议吗？

我的<ul> <li>结构有四列。（见图片）

Answer 1

解决了这些问题。我在这里缺少true

$('#allPhoto1').find('ul.ins-view').append($item).masonry( 'appended', $item, true);

从底部设置true动画附加图像。

我做的另一件事是计算图像高度并在附加之前将其设置在图像css中，它将避免重叠。我将很快发布现场演示。

感谢宝贵的时间：）

Answer 2

如果您的商品中有图片，请将imagesLoaded（http://imagesloaded.desandro.com/）与砌体一起使用。 以下代码对我有用

//Initiate  maosnry
$container = $('#container');
$container.imagesLoaded(function(){ 
    $container.masonry({
        itemSelector: '.item'
    }); 
});

//and on ajax call append or prepend more items
var $data = $(data).filter(".items");   
$container.prepend($data).imagesLoaded(function(){
    $container.masonry( 'prepended', $data, true );
});