要素がブロック状に隙間を埋めていく「vue-masonry」

by kabanoki

HTML

<script src="https://unpkg.com/[email protected]/dist/vue-masonry-plugin-window.js"></script>
<div id="app">
  <select v-model="n">
    <option value="5">5</option>
    <option value="10">10</option>
    <option value="15">15</option>
    <option value="20">20</option>
    <option value="50">50</option>
  </select>
  <div v-masonry="'containerId'" transition-duration="0.3s" item-selector=".item">
      <div v-masonry-tile class="item" :class="addClass(index)" v-for="(item, index) in Number(n)">
          {{item}}
      </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}
.item{
  width: 150px;
  border: 1px solid #ddd;
  justify-content: center;
  align-items: center;
  display: flex;
}
.item1 {
  height: 50px;
}
.item2 {
  height: 100px;
}
.item3 {
  height: 150px;
}

Vue

const VueMasonryPlugin = window["vue-masonry-plugin"].VueMasonryPlugin;

Vue.use(VueMasonryPlugin)

let app = new Vue({
  el: '#app',
  data: {
    n: 5
  },
  methods: {
    addClass: function(i){
      let min = 1 ;
      let max = 3 ;
      let random = Math.floor( Math.random() * (max + 1 - min) ) + min ;
      return 'item' + random;
    }
  }
});