Javascript 动态地将项目添加到Packery。它到底是如何工作的？

我想将ajax返回的项目附加到Packy，删除当前项目并布局新项目

我用Metafizzy（开发者）的叉形笔在codepen上工作

这正是我想要的功能：

但是，在我的代码中，我不必创建items数组或将其添加到DOM中，因为我使用的是已经创建的元素数组

下面是我正在使用的代码示例

$.post( ajax_vars.ajaxurl, { action: 'function', param : param }, function(data){

    if( data == '' || data == 'undefined' || data == 'No More Posts' || data == 'No $args array created' ){
        data = '';
    }      
    //gather current Packery elements
    var elToRemove = pckry.getItemElements()
    // append elements to container
    container.append($(data));
        console.log(elems);
    // add and lay out newly appended elements
    pckry.addItems($(data));

    pckry.remove(elToRemove);
    packery.layout();
      elems = pckry.getItemElements();
    console.log(elems);

    }
});

元素就在那里，console.log（$（data））显示了响应，当我检查Inspector时，我可以看到container div中返回的元素。问题是无论我做什么，我都无法让Packer“识别”新项目并相应地进行布局。元素返回空。我使用了addItems（）、prepended（）和appended（）方法，但没有任何效果

---

有什么帮助吗？

似乎您首先需要调用append，然后再调用append，非常棘手

这是我如何让它工作的

    var elems = [];
    var elem = document.createElement('div');
    elem.innerHTML = "<img src='http://placehold.it/1000X500'></div>"
    elem.className = 'item'
    //add your element to the arrays, you can add multiple here
    elems.push(elem)
    // append elements to container
    container.append(elems);
    // add and lay out newly appended elements
    container.packery('appended', elems);

var elems=[]；
var elem=document.createElement（'div'）；
elem.innerHTML=“”
elem.className='item'
//将元素添加到数组中，可以在此处添加多个元素
元素推送（元素）
//将元素附加到容器
容器。附加（elems）；
//添加并布置新添加的图元
容器包装（“附加”，元素）；