用 Packery.js 附加问题

Question

我正在尝试将 'click' 上的现有页面内容附加到网格的末尾，但没有成功。 Codepen 上的文档中的示例创建了一个 div，而我试图使用 packery.('getItemElements') 从现有网格项中提取数据，而它 returns 是一个 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/

Answer 1

我在这里有预感，但如果这不起作用，我会更新更多...

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

});

Answer 2

如果有人遇到这个问题，这是我的解决方案：

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

用 Packery.js 附加问题

Append issues with Packery.js

javascript

packery