Question

我想用jQuery将数据从JSON加载到我的页面（某种简单的无限滚动）。每次我向下滚动并到达页面底部时，将从JSON文件加载4个项目。问题是如果浏览器窗口高度比我加载的内容（4项）短，则不会出现滚动条。因此无法加载更多数据。我想要的是如果滚动条不存在则从JSON数组加载8个项目，当我向下滚动时我想加载4个项目，依此类推。（滚动后我不想再添加8个项目）

var dataFile = 'data.json',
    container = '#items',
    limit = 4,
    start = 1;

loadData(start);

function loadData(start) {
    $.getJSON(dataFile, function(data) {
        for ( var i = start * limit - limit,j = i + limit; i < j; i++ ) {
            var item = data['items'][i];
            if (item) {
                var out = "";
                out += "<div><h2>" + item['name'] + "</h2><img src='img/" + item['image'] + "'>'</div>";
                $(out).appendTo($(container));
            } else {
                break;
            }
        }
        start++;
        console.log(start);
        if ( $(container).height() < $(window).height() ) {
            loadData(start);
        }
    });
}

$(window).scroll(function() {
    if ( $(window).scrollTop() + $(window).height() == $(document).height() ) {
        start++;
        loadData(start);
    }
});

我的JSON文件

{
  "items" : [
    {
      "name": "1 - Beggar Sandwich",
      "image" : "beggar-sandwich.png"
    },
    {
      "name": "2 - Cold Dog Sandwich",
      "image" : "cold-dog.png"
    },
    {
      "name" : "3 - Duck Sauce Sandwich",
      "image" : "duck-sauce.png"
    },
    {
      "name" : "4 - Grass Murderer Sandwich",
      "image" : "grass-murderer.png"
    },
    {
      "name" : "5 - Animal Lover Sandwich",
      "image" : "love-animals.png"
    },
    {
      "name" : "6 - Full Sandwich Menu",
      "image" : "menu.png"
    },
    {
      "name" : "7 - Murderer Sandwich",
      "image" : "murderer.png"
    },
    {
      "name" : "8 - Navy Sandwich",
      "image" : "navy.png"
    },
    {
      "name" : "9 - Grand Burger",
      "image" : "GrandBurger.png"
    },
    {
      "name" : "10 - Cherry Pie",
      "image" : "cherry-pie.png"
    },
    {
      "name": "11 - Beggar Sandwich",
      "image" : "beggar-sandwich.png"
    },
    {
      "name": "12 - Cold Dog Sandwich",
      "image" : "cold-dog.png"
    },
    {
      "name" : "13 - Duck Sauce Sandwich",
      "image" : "duck-sauce.png"
    },
    {
      "name" : "14 - Grass Murderer Sandwich",
      "image" : "grass-murderer.png"
    },
    {
      "name" : "15 - Animal Lover Sandwich",
      "image" : "love-animals.png"
    },
    {
      "name" : "16 - Full Sandwich Menu",
      "image" : "menu.png"
    },
    {
      "name" : "17 - Murderer Sandwich",
      "image" : "murderer.png"
    }
  ]
}

Answer 1

function filterArray(arr,min,max){
 var len   = arr.length
    ,up    = -1
    ,down  = len
    ,rrange= []
    ,mid   = Math.floor(len/2) 
 ;
 while (up++<mid && down-->mid){
    if (arr[up]>=max || arr[down]<=min){break;}
    if (arr[up]>=min){
      rrange.push(arr[up]);
    }
    if (arr[down]<=max){
      rrange.push(arr[down]);
    }
 }
 return rrange;   
}

Answer 2

尝试：

(function ($) {
    $.fn.hasScrollBar = function () {
        return this.get(0).scrollHeight > this.height();
    }
})(jQuery);



var numberOfItems = 4,
        start = 1;

loadData(start);

$(window).scroll(function () {
    if ($(window).scrollTop() + $(window).height() == $(document).height()) {
        start++;
        loadData(start);
        console.log('bottom');
    }
});

function loadData(start) {
    var items = {
        "items": [
            {
                "name": "1 - Beggar Sandwich",
                "image": "beggar-sandwich.png"
            },
            {
                "name": "2 - Cold Dog Sandwich",
                "image": "cold-dog.png"
            },
            {
                "name": "3 - Duck Sauce Sandwich",
                "image": "duck-sauce.png"
            },
            {
                "name": "4 - Grass Murderer Sandwich",
                "image": "grass-murderer.png"
            },
            {
                "name": "5 - Animal Lover Sandwich",
                "image": "love-animals.png"
            },
            {
                "name": "6 - Full Sandwich Menu",
                "image": "menu.png"
            },
            {
                "name": "7 - Murderer Sandwich",
                "image": "murderer.png"
            },
            {
                "name": "8 - Navy Sandwich",
                "image": "navy.png"
            },
            {
                "name": "9 - Grand Burger",
                "image": "GrandBurger.png"
            },
            {
                "name": "10 - Cherry Pie",
                "image": "cherry-pie.png"
            },
            {
                "name": "11 - Beggar Sandwich",
                "image": "beggar-sandwich.png"
            },
            {
                "name": "12 - Cold Dog Sandwich",
                "image": "cold-dog.png"
            },
            {
                "name": "13 - Duck Sauce Sandwich",
                "image": "duck-sauce.png"
            },
            {
                "name": "14 - Grass Murderer Sandwich",
                "image": "grass-murderer.png"
            },
            {
                "name": "15 - Animal Lover Sandwich",
                "image": "love-animals.png"
            },
            {
                "name": "16 - Full Sandwich Menu",
                "image": "menu.png"
            },
            {
                "name": "17 - Murderer Sandwich",
                "image": "murderer.png"
            }
        ]
    };
    if (!$('#items').hasScrollBar()) {
        numberOfItems = 8;
    }
    for (var i = start * numberOfItems - numberOfItems, j = i + numberOfItems; i < j; i++) {
        var item = items['items'][i];
        if (item) {
            var out = "";
            out += "<div><h2>" + item['name'] + "</h2><img src='img/"
                    + item['image'] + "'>'</div>";

            $(out).appendTo("#items");
        } else {
            break;
        }
    }
    start++;
}

这里是小提琴：https://jsfiddle.net/p5jL1fvj/1/

根据滚动和窗口高度

2 个答案: