动态地向Packery添加项.它到底是怎么工作的

Question

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

我用Metafizzy(开发人员)的分叉笔在codependency上工作

这是我想要的确切功能: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))显示响应，当我检查检查器时，我可以看到容器div内返回的元素。问题是，无论我做什么，我都无法让Packery"识别"新项目并相应地布局它们。Elems返回空。我已经使用了addItems()、preppended()和appended()方法，但都无济于事。

帮忙吗?

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