我想将 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() 方法,但没有效果。
有什么帮助吗?
最佳答案
看来你首先需要调用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);
关于javascript - 动态添加项目到Packery。它到底是如何运作的?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22723741/