Content use Infinite Scroll with Masonry and ImagesLoaded

README.md

Content use Infinite Scroll with Masonry and ImagesLoaded

Official Dependencies

• https://infinite-scroll.com
• https://masonry.desandro.com
• https://imagesloaded.desandro.com

Note:

• Remove ImagesLoaded if yout want no needed / content not use Images

css.css

.page-load-status {
  display: none;
  padding: 20px 0;
}
.page-load-status-message {
  text-align: center;
  color: #777;
}

.loader-ellips {
  font-size: 20px;
  position: relative;
  width: 4em;
  height: 1em;
  margin: 10px auto;
}
.loader-ellips-dot {
  display: block;
  width: 1em;
  height: 1em;
  border-radius: 0.5em;
  background: #555;
  position: absolute;
  animation-duration: 0.5s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}
.loader-ellips-dot:nth-child(1),
.loader-ellips-dot:nth-child(2) {
  left: 0;
}
.loader-ellips-dot:nth-child(3) { left: 1.5em; }
.loader-ellips-dot:nth-child(4) { left: 3em; }
@keyframes reveal {
  from { transform: scale(0.001); }
  to { transform: scale(1); }
}
@keyframes slide {
  to { transform: translateX(1.5em) }
}
.loader-ellips-dot:nth-child(1) {
  animation-name: reveal;
}
.loader-ellips-dot:nth-child(2),
.loader-ellips-dot:nth-child(3) {
  animation-name: slide;
}
.loader-ellips-dot:nth-child(4) {
  animation-name: reveal;
  animation-direction: reverse;
}

html.html

<script src="https://unpkg.com/[email protected]/dist/infinite-scroll.pkgd.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/masonry.pkgd.min.js"></script>
<script src="https://unpkg.com/[email protected]/imagesloaded.pkgd.min.js"></script>

<div class="grid">
	<div class="column grid-item">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem deserunt magni facere cupiditate quibusdam, animi autem nihil aliquid quidem impedit saepe. Molestiae sed error labore numquam aut a possimus, molestias.
	</div>
	<div class="column grid-item">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem deserunt magni facere cupiditate quibusdam, animi autem nihil aliquid quidem impedit saepe. Molestiae sed error labore numquam aut a possimus, molestias.
	</div>
	<div class="column grid-item">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem deserunt magni facere cupiditate quibusdam, animi autem nihil aliquid quidem impedit saepe. Molestiae sed error labore numquam aut a possimus, molestias.
	</div>
	<div class="column grid-item">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem deserunt magni facere cupiditate quibusdam, animi autem nihil aliquid quidem impedit saepe. Molestiae sed error labore numquam aut a possimus, molestias.
	</div>
	<div class="column grid-item">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem deserunt magni facere cupiditate quibusdam, animi autem nihil aliquid quidem impedit saepe. Molestiae sed error labore numquam aut a possimus, molestias.
	</div>
</div>

<div class="page-load-status">
  <div class="loader-ellips infinite-scroll-request">
    <span class="loader-ellips-dot"></span>
    <span class="loader-ellips-dot"></span>
    <span class="loader-ellips-dot"></span>
    <span class="loader-ellips-dot"></span>
  </div>
  <div class="page-load-status-message infinite-scroll-last">End of content</div>
  <div class="page-load-status-message infinite-scroll-error">No more pages to load</div>
</div>

js.js

var $grid = $('.grid').masonry({
    columnWidth: '.column',
    itemSelector: '.grid-item',
})
$grid.infiniteScroll({
        path: ".pagination-next",
        append: ".grid-item",
        outlayer: $grid.data('masonry'),
        status: ".page-load-status",
        history: false
    },
    function(newElements) {
        newElements.imagesLoaded(function() {
            $grid.masonry('appended', newElements)
        })
    }
)