vue使用isotope-layout实现自适应布局

记录在vue中使用isotope-layout实现布局自适应，ui提供的实现效果要求如此链接：www.bootstrapmb.com/item/11417/…。

开启编码之旅~~

1. 在vue项目中通过npm install isotope-layout安装插件。
2. 在需要使用的vue组件中导入插件

import Isotope from 'isotope-layout'

3.新建vue组件，直接上完整代码,简单的自适应实现，预览效果以及更多isotope-layout需要到isotope-layout官网查看

<template>
  <div class="isotope-demo">
    <div class="isotope-grid">
      <div
        v-for="(item, index) in items"
        :key="index"
        :class="'isotope-item ' + item.category"
      >
        <img
          :src="item.image"
          style="margin:1.5%"
        />
        <h3>{{ item.title }}</h3>
        <p>{{ item.description }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import Isotope from 'isotope-layout'

export default {
  data () {
    return {
      isotope: null,
      items: [
        { title: 'Cat 1', category: 'cats', image: 'https://placekitten.com/300/200', description: 'Description for Cat 1' },
        { title: 'Dog 1', category: 'dogs', image: 'https://placedog.net/300/200', description: 'Description for Dog 1' },
        { title: 'Cat 2', category: 'cats', image: 'https://placekitten.com/300/200', description: 'Description for Cat 2' },
        { title: 'Dog 2', category: 'dogs', image: 'https://placedog.net/300/200', description: 'Description for Dog 2' },
        { title: 'Cat 3', category: 'cats', image: 'https://placekitten.com/300/200', description: 'Description for Cat 3' },
        { title: 'Cat 1', category: 'cats', image: 'https://placekitten.com/300/200', description: 'Description for Cat 1' },
        { title: 'Dog 1', category: 'dogs', image: 'https://placedog.net/300/200', description: 'Description for Dog 1' },
        { title: 'Cat 2', category: 'cats', image: 'https://placekitten.com/300/200', description: 'Description for Cat 2' },
        { title: 'Dog 2', category: 'dogs', image: 'https://placedog.net/300/200', description: 'Description for Dog 2' },
        { title: 'Cat 3', category: 'cats', image: 'https://placekitten.com/300/200', description: 'Description for Cat 3' },
        { title: 'Cat 1', category: 'cats', image: 'https://placekitten.com/300/200', description: 'Description for Cat 1' },
        { title: 'Dog 1', category: 'dogs', image: 'https://placedog.net/300/200', description: 'Description for Dog 1' },
        { title: 'Cat 2', category: 'cats', image: 'https://placekitten.com/300/200', description: 'Description for Cat 2' },
        { title: 'Dog 2', category: 'dogs', image: 'https://placedog.net/300/200', description: 'Description for Dog 2' },
        { title: 'Cat 3', category: 'cats', image: 'https://placekitten.com/300/200', description: 'Description for Cat 3' },
      ],
    };
  },
  methods: {
    // Init Isotope
    initIsotope () {
      this.isotope = new Isotope('.isotope-grid', {
        itemSelector: '.isotope-item',
        transitionDuration: '0.7s',
      });
    },
  },
  mounted () {
    // Init Isotope on mounted
    this.initIsotope();
  },
};
</script>

<style>
.isotope-grid {
  width: 100vw;
}
.isotope-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20%;
  margin: 20px;
  transition: all 0.3s;
}
.cat {
  height: 400px;
}
.dogs {
  height: 300px;
}
.isotope-item img {
  width: 100%;
}
.grid-sizer {
  width: 25%;
}
</style>