Question

我正在尝试使用Masonry在页面滚动时在我的容器上追加新元素。我正在尝试使用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();
                    });
                };
});

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

Answer 1

我最近在使用imagesloaded和Isotope（masonry.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

好吧，我决定尝试使用Isotope，一切都很完美！

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

如何使用Masonry和AJAX附加新图像项而不会在窗口滚动上重叠

2 个答案: