As you might guess from the title already, in today's Drupal tutorial I will write about how to configure infinite scroll/load more button for Drupal 8 website. The best - both behaviors can be achieved using just one module - Views Infinite Scroll

Check out following tutorials for Drupal 7: Drupal masonry front pageViews lode more pager with Ajax for Drupal

And again, as in the previous tutorials, you can find a live preview on Tourgeorgia.eu

  • Download and enable Views Infinite Scroll module
  • Visit views page, you would like to attach infinite scroll or load more function
  • Change Pager: Infinite scroll, I will use 10 items to load on default

Pager settings for Infinite scroll

Pager settings for Infinite scroll

Now in order to make it work with Ajax, let's turn on Ajax:

  • Under Advanced - > Other: Use AJAX: Yes

Almost there, but here are few things we should fine tune here

Settings for Infinite Scroll

Under Pager (use pager) click on Infinite Scroll Options and check next to the Automatically load Content

Automatically load Content

Automatically load Content

Settings for Load more 

Repeat the same steps as for infinite scroll, just make sure to uncheck Automatically load Content

Here you go - a really easy way to setup both infinite scroll or load more pager with Ajax.

Load more button with Ajax for Drupal 8 website

Load more button with Ajax for Drupal 8 website

Optionally 

CSS code to make load more button 100% width (for Bootstrap powered template}

.pager li > a, .pager li > span {
    display: inline-block;
    padding: 5px 14px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 0px;
    width: 100%;
}

CSS bug wit custom views-row classes (first, last) in Drupal 8

Seems there is a bug with Drupal 8 views, when trying to render classes for views-row. There exist some workarounds, but right I find them secondary and I'm ready to wait until it will be solved with next views updates.