javascript - 动态添加项目到Packery。它到底是如何运作的？

Question

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

我用 Metafizzy(开发者)的 fork 笔在 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)) 显示响应，当我检查检查器时，我可以看到容器 div 内返回的元素。问题是，无论我做什么，我都无法让 Packery“识别”新项目并相应地布局它们。 elems 返回空。我已经使用了 addItems()、preppend() 和appended() 方法，但没有效果。

有什么帮助吗？

Answer 1

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