1

I am trying to use Masonry to append new elements on my container on page scroll. I am trying to use AJAX for it and here is my UPDATED code:

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

New items are being added to the page on document scroll. I am unable though to append these new items to the current masonry layout. This is why I am creating a second masonry container. On the first new set ot items, they are being generated on the top of the page and then, they move down to the bottom in a quite ugly way. After that all new Items are being added correctly, sometimes they overlap each other, sometimes not, I guess non cached images overlap. What I want to achieve is to be able to find the ".box" html item from data and then append it to the existing masonry container. I have been struggling to do this for some time now after reading all related questions here, but still no success.

4

2 回答 2

1

imagesloaded我最近在使用with （masonry.js 之上的插件）时遇到了类似的问题Isotope，但这仅限于 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();
});
于 2013-06-20T13:57:21.027 回答
1

好吧，我决定尝试改用同位素，一切都很完美！

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();
                    });
                };
于 2013-07-11T15:42:21.683 回答