<div class="container">
	<div class="row">
		<div class="col-md-12 card-container">
			
		</div>
	</div>
	<div class="row">
		<div class="col-md-12 load-more-container">
			<button data-index="0" class="btn btn-primary btn-block load-more">Load More</button>
		</div>
	</div>
</div>
.load-more-container {
	margin-top: 15px;
}

.card {
	margin-bottom: 15px;
}
class LazyLoad {
	constructor() {
		this.btn = document.querySelector(".load-more")
		this.cardContainer = document.querySelector('.card-container')
		this.BASE_URL = 'https://picsum.photos/list'
	}
	
	load() {
		fetch(this.BASE_URL)
		.then(resp => resp.json())
		.then(obj => {
			let start = (this.btn.dataset.index == 0) ? parseInt(this.btn.dataset.index) : parseInt(this.btn.dataset.index) + 1
			let end = start + 5
			let arr = obj.slice(start, end)
			if(arr.length > 0) {
				let cards = '';
				arr.forEach(f => {
					cards += `
						<div class="card">
						  <div class="card-body">
							<h5 class="card-title">${f.author}</h5>
							<img src="https://picsum.photos/458/354/?image=${f.id}" alt="">
						  </div>
						</div>
					`
				})
				
				this.cardContainer.insertAdjacentHTML('beforeend',cards)
				this.btn.dataset.index = end
			}
		})
	}
		
	init() {
		const container = document.querySelector(".load-more-container")
		let observer = new IntersectionObserver(entries => {
			entries.forEach(entry => {
				const { isIntersecting } = entry

				if(isIntersecting) {
					this.load()
					//container.children[0].click()
					//observer = observer.disconnect()
				}
			}, {
				root: container
			})
		})

		observer.observe(container)
	}
}

const lazyLoad = new LazyLoad()
lazyLoad.init()

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.