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（$（data））显示响应，当我检查Inspector时，我可以看到容器div中返回的元素。问题在于，无论我做什么，我都无法让Packery“识别”新项目并相应地布局它们。 elems返回空。我使用了addItems（），preppended（）和attached（）方法但没有用。

任何帮助？

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);

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

1 个答案: