Jquery 如何使用Mashise和AJAX添加新图像项，而不在窗口滚动上重叠

我正在尝试使用砖石将新元素添加到页面滚动的容器中。我正在尝试使用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();
                    });
                };
});

---

正在将新项目添加到文档滚动页面。但我无法将这些新项目附加到当前的砖石布局中。这就是我创建第二个砌体容器的原因。在第一组新的ot项目中，它们在页面顶部生成，然后以一种非常丑陋的方式向下移动到底部。在正确添加所有新项目之后，有时它们彼此重叠，有时不重叠，我猜非缓存图像重叠。我想要实现的是能够从

data

中找到“.box”html项，然后将其附加到现有的容器中。在阅读了所有相关的问题之后，我已经为此奋斗了一段时间，但仍然没有成功。

最近，我在使用同位素（

isototype

）的

imagesloaded

时遇到了类似的问题，但这仅限于Firefox

经过一些调试，我发现问题是由于图像上的

load

事件没有正确触发（猜测从缓存加载的图像）。因此，在图像未完全加载的情况下执行砌体脚本，并为

砌体

提供不正确的高度值，因此，在图像完全加载时重叠

向下滚动时，您可能会再次调用

massy

脚本，但这一次图像已完全加载，因此需要进行适当的排列

为了解决这个问题，我完全删除了

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>

---

嗯，我决定试着用同位素来代替，一切都很好

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();
                    });
                };

---

谢谢，我一直在想这样的事情可能就是问题所在。但是，我的站点上加载的图像的高度不同。也许我应该找到一种方法来计算每个图像的高度（宽度相同），然后再将它们附加到容器中。有什么建议吗？@G.Vasilev我已经更新了我的答案。尝试使用上面的代码，让我知道它是否有效！干杯我无法成功地将您的代码与我的代码集成。也许我做错了<代码>未捕获类型错误：对象没有方法“find”

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();
                    });
                };