我试图将现有的页面内容“单击”附加到网格的末尾,但是没有运气。 Codepen上的文档中的示例创建了一个div
,而我试图使用packery.('getItemElements')
从现有的网格项中提取数据,并且当它返回HTML元素数组时,当我追加到网格时,原始项移动,旧的消失了,但是在Packery已经放置了元素之前没有消失,留下了一些白洞。
这是我到目前为止的内容:
grid = $('.grid');
grid.packery({
gutter: 10,
itemSelector: '.grid-item',
isHorizontal: true
});
$('.grid-wrapper .navigation .next').on('click', function() {
var newGridContent = [];
var currentContent = $('.grid').packery('getItemElements');
for (var i = 0; i < currentContent.length; i++) {
var newGridItem = currentContent[i];
newGridContent.push(newGridItem);
};
grid.append(newGridContent);
grid.packery('appended', newGridContent);
});
您可以在顶部主网格轮播中看到此直播:
http://johnpett.com/youraudience/
最佳答案
如果有人偶然发现,这是我的解决方案:
var currentContent;
$('.grid-wrapper .navigation .next').on('click', function() {
currentContent = $('.grid').packery('getItemElements');
var elems = [];
for (var i = 0; i < 10; i++) {
var elem = getItemElement(i);
elems.push(elem);
};
$('.grid').append(elems);
$('.grid').packery('appended', elems);
$('.grid').animate({
"left": "-=500px"
});
});
function getItemElement(i) {
var elem = document.createElement('div');
var itemImage = currentContent[i].style.backgroundImage;
var itemOuterHTML = currentContent[i].outerHTML;
elem.style.backgroundImage = itemImage;
elem.innerHTML = itemOuterHTML;
return elem;
}
关于javascript - 附加Packery.js问题,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/28532250/