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>
<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" :origin-top="true" :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;">
          <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 vm = new Vue({
  el: '#vue-instance',
  data: {
  	posts: []
  },
  created() {
  	const vm = this;
    fetch('https://jsonplaceholder.typicode.com/posts').
    	then(resp=>{
      	vm.posts = resp;
      })
  },
	methods: {  }
});