如何添加新的图像项目与砌体和AJAX没有重叠的窗口滚动

Question

我正试图使用砌体在我的容器上添加新的元素。我试图使用AJAX，这是我的更新代码:

                $(document).ready(function(){
                var container = document.querySelector('#entries-content-ul');
                imagesLoaded( container, function() {
                    new Masonry( container, {
                        itemSelector: '.box',
                        isAnimated:true,
                        animationOptions: {
                        duration: 700,
                        easing:'linear',
                        queue :false
                        }
                        });
                    });
                var ajaxstart=1;
                var tpage = 2;
                function lastAddedLiveFunc()
                {
                    $('div#lastPostsLoader').html('');
                    $.get("{/literal}{$baseurl}{literal}/votejson.php?page="+tpage, function(data){
                        if (data != "") {
                            $data = $( data );                      
                            $('#load_image').css('display','none');
                            var container = document.querySelector('#entries-content-ul'); 
                            var msnry;
                            // initialize Masonry after all images have loaded
                            $("#entries-content-ul").append(data).imagesLoaded( data, function() {
                            ajaxstart=1;
                            msnry = new Masonry( container );
                            });

                        }else{
                        ajaxstart=2;
                        }
                        $('div#lastPostsLoader').empty();
                    });
                };
});

新项目被添加到文档滚动页。虽然我无法将这些新项目附加到当前的砌体布局。这就是为什么我正在创建第二个砖石容器。在第一组新项目中，它们是在页面顶部生成的，然后以一种非常难看的方式向下移动到底部。之后，所有的新项目都被正确添加，有时他们相互重叠，有时不是，我猜非缓存图像重叠。我想要达到的是能够找到"。box"html项目从data，然后追加到现有的砌体容器。在阅读了这里的所有相关问题后，我一直在努力做到这一点，但仍然没有成功。

Answer 1

我最近在使用imagesloaded和Isotope (masony .js之上的一个插件)时遇到了类似的问题，但这仅限于Firefox。

经过一些调试，我发现这个问题是由于图像上的load事件没有正确触发(猜测从缓存加载的图像)。因此，砌体脚本在没有图像完全加载的情况下执行，并给masonry一个不正确的高度值，因此，当图像完全加载时重叠。

当您向下滚动时，您可能会再次调用masonry脚本，但这一次是完全加载图像，因此，正确的安排。

为了解决这个问题，我完全删除了imagesloaded检查，并且必须显式地设置其容器中的图像的高度/宽度参数。这样，即使图像正在加载，你也可以触发砌体脚本，现在得到正确的高度/宽度，因此，没有重叠。

说明:

Previous HTML:
<div class="image-container">
    <img src="some-random-goat-image.jpg" alt="Crazy goat" />
</div>
New HTML:
<div class="image-container" style="height: 400px; width: 200px">
    <img src="some-random-goat-image.jpg" alt="Crazy goat again" />
</div>

如果你有动态高度的图像，你可以手动触发加载事件的图像，当他们完成加载和触发masonry脚本后，最后一个图像完成加载:

假设data是HTML返回的结果:

$(hiddendiv).html(data);
var 
$data = $(hiddendiv).html(),
images = $data.find('img'),
loadcount = 0;
images.one('load', function(){
        var 
        imgheight = $(this).height,
        containerid = $(this).data('cid');
        $data.find('div[data-cid="' + containerid + '"]').css('height', imgheight);
        loadcount++;
    if(loadedcount === images.length ) {
        //Append $data to page and initialize masonry after last image loads up
    }
})
.each(function(){
   if(this.complete) $(this).load();
});

Answer 2

嗯，我决定尝试使用同位素代替，一切都工作得很完美!

var $container = $('#entries-content-ul');
                    $container.imagesLoaded( function(){
                        $container.isotope({
                            itemSelector : '.box'
                            });
                            });
                var tpage = 2;
                function lastAddedLiveFunc()
                {
                    $('div#lastPostsLoader').html('');
                    $.get("{/literal}{$baseurl}{literal}/votejson.php?page="+tpage, function(data){
                        if (data != "") {
                            var el = $(data);
                            el.imagesLoaded(function() {
                                $container.append(el).isotope('appended', el, true);
                                });
                        ajaxstart=1;                    
                        }else{
                        ajaxstart=2;
                        }
                        $('div#lastPostsLoader').empty();
                    });
                };