附加Packey.js的问题

Append issues with Packery.js

本文关键字：问题 js Packey 附加      更新时间：2023-12-08

我试图在"点击"时将现有页面内容附加到网格的末尾，但没有成功。Codepen上文档中的例子创建了一个div，而我正试图使用packery.('getItemElements')从现有的网格项中提取数据，当它返回一个HTML元素数组时，当我附加到网格时，原始项会移动，旧项会消失，但在Packey已经将元素放在后面之前，会留下一个白色的洞。

这就是我目前所拥有的：

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

我有预感，但如果不起作用，我会更新更多。。。

var p_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);
    };
    p_grid.append(newGridContent).packery('appended', newGridContent);
});
相关文章：