Vue Masonry With Infinite Scrolling Demo

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

by Alex

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>
<div id="vue-instance" class="container">
  <div v-masonry transition-duration="0.3s" item-selector=".item"  :horizontal-order="true">
      <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;">
          <div class="card-body">
            <h5 class="card-title">{{post.id}} <strong>{{ post.title }}</strong></h5>
              <p class="card-text">{{ smartTrim(post.content, 100) }}</p>
            </div>
          </div>
        </div>  
      </div>
  </div>
</div>

JavaScript

var vm = new Vue({
  el: '#vue-instance',
  data: {
  	posts: []
  },
  created() {
    this.getPosts()
  },
	methods: {
    getPosts() {
    	for (var i = 0; i < 16; i++) {
      	this.posts.push({
          title: chance.sentence(),
          id: i,
          content: chance.paragraph()
        })
      }
    },
    
    smartTrim(string, maxLength) {
      var trimmedString = string.substr(0, maxLength);
			return trimmedString.substr(0, Math.min(trimmedString.length, trimmedString.lastIndexOf(" ")))
    }
  }
});