1

我想将 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() 和 appended() 方法，但无济于事。

有什么帮助吗？

4

1 回答 1

0

看来您首先需要调用 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);
于 2016-01-05T00:39:08.780 回答