getJSON，拆分结果并在向下滚动时附加 x 结果

Question

我正在尝试使用通过 getJSON 检索的数据构建图像砌体。因为 getJSON 返回的结果很多，而且页面获取速度很慢，所以我尝试从这些结果中创建块，这样我只能在向下滚动时附加更多项目。

我通过这种方式获取图像：

function chunkArray(myArray, chunk_size){
    var results = [];

    while (myArray.length) {
        results.push(myArray.splice(0, chunk_size));
    }          
    return results;
}

$(document).ready(function () {

    // enable masonry
    var grid = $('#gallery').masonry({
        itemSelector: '.gridItem',
        columnWidth: '.gridSizer',
        percentPosition: true,
        transitionDuration: 0
    });

    // get all images
    $.getJSON("images.json", function (data) {

        var images = [];

        $.each(results.images, function (i, image) {

            var url = image.path + '/' + image.filename;

            images.push('<a href="' + url + '"><img src="' + url + '"></a>');

        });

        images = $(images.join(""));

        // create chunks with 50 images each
        images = chunkArray(images, 50);

        // append items to grid
        grid.append(images[0]).masonry('appended', images[0]);

    });

});

这会将前 50 个结果附加到我的库中。但是我不知道如何实现向下滚动时追加下50张图片。

或者有没有更好/更简单的方法来做到这一点？

谢谢

Answer 1

将你的 foreach 循环重写为：

var itemsPerPage = 50, page = 0
var images = [], image;
for (var i=0;i<itemsPerPage;i++)
{
    image = results.images[i+itemsPerPage * page];
    // the rest of your code
}