Vue Masonry With Infinite Scrolling Demo

https://github.com/shershen08/vue-masonry

by Mikhail

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.0.0/masonry.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chance/1.0.16/chance.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="https://unpkg.com/vue-masonry@0.11.3/dist/vue-masonry-plugin-window.js"></script>
<div id="vue-instance" class="container">
  <div v-masonry transition-duration="0.3s" item-selector=".item" :origin-top="true" :horizontal-order="false">
      <div class="row">
        <div v-masonry-tile class="col-md-4" v-for="(post, index) in posts">
        <div class="card m-4" style="width: 18rem;">
          <img class="card-img-top" src="http://via.placeholder.com/350x150" alt="Card image cap">
          <div class="card-body">
            <h5 class="card-title"><strong>{{ post.title }}</strong></h5>
              <p class="card-text">{{ smartTrim(post.content, 100) }}</p>
            </div>
          </div>
        </div>  
      </div>
  </div>
</div>

JavaScript

var VueMasonryPlugin = window["vue-masonry-plugin"].VueMasonryPlugin
Vue.use(VueMasonryPlugin)

var vm = new Vue({
  el: '#vue-instance',
  data: {
  	posts: []
  },
  created() {
    window.addEventListener('scroll', this.handleScroll);
    this.getPosts()
  },
	methods: {
    getPosts() {
    	for (var i = 0; i < 16; i++) {
      	this.posts.push({
          title: chance.sentence(),
          content: chance.paragraph()
        })
      }
    },
    handleScroll() {
      let scrollHeight = window.scrollY
      let maxHeight = window.document.body.scrollHeight - window.document.documentElement.clientHeight
      
      if (scrollHeight >= maxHeight - 200) {
        this.getPosts()
      }
    },
    smartTrim(string, maxLength) {
      var trimmedString = string.substr(0, maxLength);
			return trimmedString.substr(0, Math.min(trimmedString.length, trimmedString.lastIndexOf(" ")))
    }
  }
});