Javascript 加载更多并合并页面

目前，我有3页和按钮重新定向到下一页。我想知道是否有一种方法，一旦我点击load more或点击页面底部，就可以将下一页与之前加载的产品一起加载？忘了解释每一页我有3个项目。那么，还有什么方法可以添加一个按钮，自动加载接下来的3个元素，直到到达终点？这是我的密码：

 <ul>
    <li class="item">
    <div class="item__media">
    <div class="item__image"><a class="product-image item__link" href="http://www.google.com" title="Google"><img alt="BMW" src="http://upload.wikimedia.org/wikipedia/commons/d/d5/BMW_S1000RR_race.jpg" /> </a></div>

    <div class="item__detail"><a class="item__link" href="http://upload.wikimedia.org/wikipedia/commons/d/d5/BMW_S1000RR_race.jpg" title="BMW motor bike">
    <p class="product-name item__name">BMW MotorBike</p>
    </a>


    </div>
        </div>
        </li>
        <li class="item">
    <div class="item__media">
    <div class="item__image"><a class="product-image item__link" href="http://www.google.com" title="Google"><img alt="BMW" src="http://upload.wikimedia.org/wikipedia/commons/d/d5/BMW_S1000RR_race.jpg" /> </a></div>

    <div class="item__detail"><a class="item__link" href="http://upload.wikimedia.org/wikipedia/commons/d/d5/BMW_S1000RR_race.jpg" title="BMW motor bike">
    <p class="product-name item__name">BMW MotorBike</p>
    </a>


    </div>
        </div>
        </li>
        <li class="item">
    <div class="item__media">
    <div class="item__image"><a class="product-image item__link" href="http://www.google.com" title="Google"><img alt="BMW" src="http://upload.wikimedia.org/wikipedia/commons/d/d5/BMW_S1000RR_race.jpg" /> </a></div>

    <div class="item__detail"><a class="item__link" href="http://upload.wikimedia.org/wikipedia/commons/d/d5/BMW_S1000RR_race.jpg" title="BMW motor bike">
    <p class="product-name item__name">BMW MotorBike</p>
    </a>


    </div>
        </div>
        </li>
        <li class="item">
    <div class="item__media">
    <div class="item__image"><a class="product-image item__link" href="http://www.google.com" title="Google"><img alt="BMW" src="http://upload.wikimedia.org/wikipedia/commons/d/d5/BMW_S1000RR_race.jpg" /> </a></div>

    <div class="item__detail"><a class="item__link" href="http://upload.wikimedia.org/wikipedia/commons/d/d5/BMW_S1000RR_race.jpg" title="BMW motor bike">
    <p class="product-name item__name">BMW MotorBike</p>
    </a>


    </div>
        </div>
        </li>
        <li class="item">
    <div class="item__media">
    <div class="item__image"><a class="product-image item__link" href="http://www.google.com" title="Google"><img alt="BMW" src="http://upload.wikimedia.org/wikipedia/commons/d/d5/BMW_S1000RR_race.jpg" /> </a></div>

    <div class="item__detail"><a class="item__link" href="http://upload.wikimedia.org/wikipedia/commons/d/d5/BMW_S1000RR_race.jpg" title="BMW motor bike">
    <p class="product-name item__name">BMW MotorBike</p>
    </a>


    </div>
        </div>
        </li>
        <li class="item">
    <div class="item__media">
    <div class="item__image"><a class="product-image item__link" href="http://www.google.com" title="Google"><img alt="BMW" src="http://upload.wikimedia.org/wikipedia/commons/d/d5/BMW_S1000RR_race.jpg" /> </a></div>

    <div class="item__detail"><a class="item__link" href="http://upload.wikimedia.org/wikipedia/commons/d/d5/BMW_S1000RR_race.jpg" title="BMW motor bike">
    <p class="product-name item__name">BMW MotorBike</p>
    </a>


    </div>
        </div>
        </li>
        <li class="item">
    <div class="item__media">
    <div class="item__image"><a class="product-image item__link" href="http://www.google.com" title="Google"><img alt="BMW" src="http://upload.wikimedia.org/wikipedia/commons/d/d5/BMW_S1000RR_race.jpg" /> </a></div>

    <div class="item__detail"><a class="item__link" href="http://upload.wikimedia.org/wikipedia/commons/d/d5/BMW_S1000RR_race.jpg" title="BMW motor bike">
    <p class="product-name item__name">BMW MotorBike</p>
    </a>


    </div>
        </div>
        </li>
        <li class="item">
    <div class="item__media">
    <div class="item__image"><a class="product-image item__link" href="http://www.google.com" title="Google"><img alt="BMW" src="http://upload.wikimedia.org/wikipedia/commons/d/d5/BMW_S1000RR_race.jpg" /> </a></div>

    <div class="item__detail"><a class="item__link" href="http://upload.wikimedia.org/wikipedia/commons/d/d5/BMW_S1000RR_race.jpg" title="BMW motor bike">
    <p class="product-name item__name">BMW MotorBike</p>
    </a>


    </div>
        </div>
        </li>
        <li class="item">
    <div class="item__media">
    <div class="item__image"><a class="product-image item__link" href="http://www.google.com" title="Google"><img alt="BMW" src="http://upload.wikimedia.org/wikipedia/commons/d/d5/BMW_S1000RR_race.jpg" /> </a></div>

    <div class="item__detail"><a class="item__link" href="http://upload.wikimedia.org/wikipedia/commons/d/d5/BMW_S1000RR_race.jpg" title="BMW motor bike">
    <p class="product-name item__name">BMW MotorBike</p>
    </a>


    </div>
        </div>
        </li>
</ul>

---

这是在单击“加载下一页”选项时可以继续的另一种方法

$(document).ready(function(){
  $("span.page1").click(function(){
     $("li.container2").load("page2.html");
  });
  $("span.page2").click(function(){
     $("li.container3").load("page3.html");
  });
});
<ul>
  <li class="container1">
    Continer content goes here
    <span class="page1">click here to load page 2</span>
  </li>
  <li class="container2">
  </li>
  <li class="container3">
  </li>
</ul>

---

我希望这将是简单和愉快的，不要忘记在使用100个无限滚动解决方案之一之前包含jquery库。谷歌是你的朋友！试着了解ajaxI，我已经看过了，但似乎我找不到任何适用的