在无限滚动中显示有限数量的项目

Question

避免使用https://infinite-scroll.com/

在HTML页面中显示json中的所有项目

我正在尝试使用jquery插件Infinite Scroll构建我的单页Web应用程序，但是json文件中存储的所有元素都同时显示在我的html页面中，并且当我单击该视图时，按钮，显示屏将继续从头开始重新加载元素

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

HTML代码

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.js"></script>
 <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>

  <div class="grid">
        <div class="grid__col-sizer"></div>
        <div class="grid__gutter-sizer"></div>
    </div>



    <p>
        <button class="view-more-button">View more</button>
    </p>


    <!-- .photo-item template HTML -->
    <script type="text/html" id="photo-item-template">

        <div class="photo-item">
            <img class="photo-item__image" src="{{Images.URL}}" />
            <p class="photo-item__caption">
            </p>
        </div>

    </script>

JavaScript代码

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

JSON数据

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