Question

关于这个问题，我已经查看过关于SO的各种问题，但似乎都没有解决我的问题。

当页面首次加载时，我在前十张图像上启动了砌体，如下所示：

$('img').load(function(){
    var masonry = $('#gallery').masonry({
        itemSelector: '.item',
});
});

接下来，当用户滚动到页面底部时，我调用ajax：

if ($(window).scrollTop() >= $(document).height() - $(window).height() + 5) {
            request_pending = true;
            $('#loading').show();
            $.ajax({
                url: '/timeline/getPhotosAPI',
                type: 'POST',
                data: { id:'<?=$id?>', offset: offset },
                success: function(html){
                    if(html.length > 0){
                        var response = JSON.parse(html);
                        $.each(response, function(i, item){
                            $('#gallery').append(item);
                            var $html = $(item);
                            $('#gallery').find('.item').masonry('appended', $html, true);
                        });
                        $('#loading').hide();
                        offset = parseInt(offset) + 10;
                        request_pending = false;
                    }else{
                        alert('fail');
                    }
                }
            });
        }

其中response是我的php中的html DOMS的JSON字符串，类似于：

array( 0 => '<div class="items"><img src="xyz" /></div>" );

上面的代码成功地将我的图像附加到我的#gallery容器中，但是砌体不会读取我的“.item”类并将相应的定位附加到我新添加的项目中。

有什么想法吗？

Answer 1

似乎Masonry不能使用html字符串。

这是我的代码：

<script>
    var offset = 10;
    var request_pending = false;
    var container = document.querySelector('#gallery');
    var msnry = new Masonry(container, {
        itemSelector: '.item',
    });

    $(document).ready(function(){
            $(window).scroll(function () { 
            if (request_pending) {
                return;
            }
            if ($(window).scrollTop() >= $(document).height() - $(window).height() + 5) {
                request_pending = true;
                $('#loading').show();
                $.ajax({
                    url: '/timeline/getPhotosAPI',
                    type: 'POST',
                    data: { id:'<?=$id?>', offset: offset },
                    success: function(pictures){
                        if(pictures.length > 0){
                            var response = JSON.parse(pictures);
                            var elems = [];
                            var fragment = document.createDocumentFragment();

                            $.each(response, function(i, item){
                                var img = document.createElement("img");
                                $(img).attr("src", item['photo_file']);
                                var div = document.createElement("div");
                                $(div).addClass("item");
                                $(div).append(img);
                                fragment.appendChild( div );
                                elems.push( div );
                            });
                            // append elements to container
                            container.appendChild( fragment );
                            // add and lay out newly appended elements
                            $('#gallery').imagesLoaded( function(){
                                msnry.appended( elems );
                            });
                            $('#loading').hide();
                            offset = parseInt(offset) + 10;
                            request_pending = false;
                        }else{
                            alert('fail');
                        }
                    }
                });
            }
        });
    });
</script>

所以我的php返回一个JSON字符串的图像源而不是HTML字符串。砌体只接受DOM元素。

注意：此处使用imageLoaded.js来防止图像堆叠。没有它，砌体就拒绝正常工作。

Answer 2

看起来在砌体文档中，他们将物品附加到容器中，然后通知砌体他们被附加。

var container = document.querySelector('#container');
var msnry = new Masonry( container );
container.appendChild( elem );
msnry.appended( elem );
msnry.layout();

请参阅Masonry : Methods

$.each(response, function(i, item){
    $('#gallery').append(item);
    msnry.appedned(item);
});

创建它时，您需要将msnry变量设置为全局或至少更高级别。

添加完所有内容后，我相信您需要致电msnry.layout();以“激活”新项目。

将元素附加到砌体上

2 个答案: