v-page

index.html

<div id="app">
  <div class="photo-wall">
    <div v-for="num in pageArr" v-html="num" class="brick"></div>
  </div>
  <v-page :setting="pagePhoto" @page-change="pagePhotoChange"></v-page>
</div>

script.js

Vue.use(vPage.default);

new Vue({
  el: "#app",
  data() {
    let arr = [];
    for (let i = 0; i < 108; i++) {
      arr.push(i + 1);
    }
    return {
      pagePhoto: {
        totalRow: arr.length,
        language: "en",
        align: "center"
      },
      arr: arr,
      pageArr: []
    };
  },
  methods: {
    pagePhotoChange(pInfo) {
      this.pageArr.splice(0, this.pageArr.length);
      let start = 0,
        end = 0;
      start = pInfo.pageSize * (pInfo.pageNumber - 1);
      end = start + pInfo.pageSize;
      if (end > this.arr.length) end = this.arr.length;
      for (let i = start; i < end; i++) {
        this.pageArr.push(this.arr[i]);
      }
    }
  }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<script src="https://unpkg.com/v-page@1.4.0/dist/v-page.js"></script>

style.css

div.photo-wall{
  display: block;
  width: 970px;
  margin: 0 auto;
}
div.photo-wall div.brick {
  border: 1px solid #ddd;
  border-radius: 2px;
  background-color: #f4f4f4;
  text-align: center;
  line-height: 100%;
  float: left;
  margin: 0 10px 10px 0;
  width: 180px;
  height: 100px;
  font-size: 60px;
  color: #bbb;
  padding-top: 35px;
}

v-page.markdown

v-page

A Pen by Terry Zeng on CodePen.

License.