JQuery Masonry：通过 ajax 附加图像答案

【问题标题】：JQuery Masonry: Append Images through ajaxJQuery Masonry：通过 ajax 附加图像
【发布时间】：2013-01-16 08:38:53
【问题描述】：

我有很多通过 ajax 加载的图像。我正在使用砌体和延迟加载插件来显示图像。通过一个 ajax 调用加载所有图像会导致问题并且页面卡住直到所有图像都被安排好，所以我正在加载 20 个图像在第一次 ajax 调用中，而不是在这个一对一的 ajax 请求之后立即在每个调用中获取 10 个图像并通过 masonry append 进行附加。

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> 结构有四列。（见图）

【问题讨论】：

你能给我们一个演示 jsfiddle 吗？

标签： jquery image jquery-masonry

【解决方案1】：

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

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

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

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

感谢您宝贵的时间:)

【讨论】：

【解决方案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 );
});

【讨论】：