砌体附加构件

Appending Elements to Masonry

本文关键字：构件      更新时间：2024-04-20

我在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');
                    }
                }
            });
        }

其中响应是来自php的html DOMS的JSON字符串，看起来像：

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

上面的代码成功地将我的图像附加到我的#gallery容器中，但Masony没有读取我的".item"类，也没有将相应的位置附加到我新附加的项中。

有什么想法吗？

看起来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字符串。Masonry只接受DOM元素。

注意：此处使用imageLoaded.js是为了防止图像堆叠。没有它，砌体就无法正常工作。

看起来在Masonry文档中，他们将项目附加到容器中，然后通知Masonry它们已附加。

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

参见砌体：方法

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

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

添加完所有内容后，我相信您需要调用msnry.layout();来"激活"新项目。

相关文章：