Javascript 在无限卷轴上显示有限数量的项目

避免在HTML页面中使用

我正试图使用jquery插件无限滚动来构建我的单页web应用程序，但是json文件中存储的所有元素都会同时显示在我的html页面中，当我单击查看更多按钮时，显示会继续从头开始重新加载元素

如何限制每页或每次单击“加载更多”按钮时显示的元素数

HTML代码

查看更多

Javascript代码 JSON数据

---

如果您的数据源只是一个JSON文件，那么最好将其存储在一个全局变量中，并使用

loadCount

选项来计算每个新页面的偏移量：是的，只有一个JSON文件，您能告诉我怎么做吗？抱歉，我想我误解了InfiniteScroll的工作原理-看起来

path

选项必须始终是URL，并且不支持从变量加载。您的JSON文件是如何生成的？您是否能够创建自己的端点，例如

www.mywebsite.com/json？page=1

，然后

？page=2

等等？我不能接受将其添加到js中，如果是这样，我认为InfiniteScroll不是适合这里工作的工具；它依赖于有一个端点，就像我刚才提到的例子一样。相反我建议检测用户何时到达页面底部，然后根据用户到达底部的次数获取JSON的相关部分。如果您的数据源只是一个JSON文件，那么最好将其存储在全局变量中，并使用

loadCount

选项来计算每个新页面的偏移量：是的，只有一个json文件，你能告诉我怎么做吗？抱歉，我想我误解了InfiniteScroll的工作原理-它看起来像

path

选项必须始终是URL，不支持从变量加载。您的JSON文件是如何生成的？您是否能够创建自己的端点，例如

www.mywebsite.com/json？page=1

，然后

？page=2

等等？我不能接受将其添加到js中，如果是这样，我认为InfiniteScroll不是适合这里工作的工具；它依赖于有一个端点，就像我刚才提到的例子一样。相反，我建议检测用户何时到达页面底部，然后根据用户到达底部的次数获取JSON的相关部分。

             var $grid = $('.grid').masonry({
            itemSelector: '.photo-item',
            columnWidth: '.grid__col-sizer',
            gutter: '.grid__gutter-sizer',
            percentPosition: true,
            stagger: 30,



            visibleStyle: {
                transform: 'translateY(0)',
                opacity: 1
            },
            hiddenStyle: {
                transform: 'translateY(100px)',
                opacity: 0
            },
        });

        //------------------//

        // Get an API key for your demos at https://unsplash.com/developers
        // var unsplashID = '9ad80b14098bcead9c7de952435e937cc3723ae61084ba8e729adb642daf0251';

        // get Masonry instance
        var msnry = $grid.data('masonry');

        $grid.infiniteScroll({
            path: function() {
                return 'data-amz.json';

            },
            // load response as flat text
            responseType: 'text',
            outlayer: msnry,

            history: true,

            button: '.view-more-button',
            // load pages on button click
            scrollThreshold: false,
            // disable loading on scroll
            // nicer reveal transition


        });

        $grid.on('load.infiniteScroll', function(event, response) {

            // console.log(response)
            // parse response into JSON data
            var data = JSON.parse(response);
            // compile data into HTML
            var itemsHTML = data.Product.map(getItemHTML).join('');

            var $items = $(itemsHTML);
            // append item elements
            $items.imagesLoaded(function() {

                $grid.infiniteScroll('appendItems', $items)
                    .masonry('appended', $items);
            })
        });

        // load initial page
        $grid.infiniteScroll('loadNextPage');

        //------------------//

        var itemTemplateSrc = $('#photo-item-template').html();

        function getItemHTML(photo) {
            return microTemplate(itemTemplateSrc, photo);
        }

        // micro templating, sort-of
        function microTemplate(src, data) {
            // replace {{tags}} in source
            return src.replace(/\{\{([\w\-_\.]+)\}\}/gi, function(match, key) {
                // walk through objects to get value
                var value = data;
                key.split('.').forEach(function(part) {
                    value = value[part];
                });
                return value;
            });
        }

{
    "Product": [
        {
            "Key": {
                "Key": "Value"
            }
        },
        {
            "Key": {
                "Key": "Value"
            }
        },
        {
            "Key": {
                "Key": "Value"
            }
        }
    ]
}