动态添加项目到包装。它是如何工作的？

Question

我想将ajax返回的物品附加到Packery，删除当前物品并布置新物品。

我有工作与来自Metafizzy（开发者）的两岔笔codepen

这是确切的功能，我想：http://codepen.io/anon/pen/Cnbxu/

然而，在我的代码情况下，我没有创建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（$（数据））示出了响应，并且当我检查检查我可以看到容器内的div返回的元素。问题是，无论我做什么，我都无法让Packery“识别”新项目并相应地进行布局。 elems返回空。我用addItems（），preppended（）和append（）方法无济于事。

任何帮助？

Answer 1

看来你首先需要调用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);