BLOG

【Nuxt.js】vue-masonryを使用して要素をタイル状に表示する

2020.12.18
TECH

ハコザキです。

今回は画像などの要素をタイル状に並べることができる「vue-masonry」を
Nuxt.jsプロジェクトに導入する方法をご紹介します!

↓こんな感じのレイアウトです

 

今回は既にNuxt.jsプロジェクトが作られていることを前提とします!

作り方はこちらでわかりやすくまとめられてます…!

 

導入

下記コマンドでプロジェクトにインストール

$ npm install vue-masonry --save
or
$ yarn add vue-masonry

 

プロジェクト内で使用できるように有効化

plugins/vue-masonry.jsに下記を記述

import Vue from 'vue'
import { VueMasonryPlugin } from 'vue-masonry'

Vue.use(VueMasonryPlugin)

nuxt.config.jsに下記を記述

plugins: [
  { src: '~/plugins/vue-masonry', ssr: false },
],

導入は以上です!

 

使い方

templateタグ内

タイル表示したい要素にv-masonry-tile をつけ、要素の親にv-masonry をつけます。
親要素にitem-selector をつけ、子要素のクラス名を指定するのを忘れないようにしてください!

<main id="topMain" class="main">
  <no-ssr>
    <div
      v-masonry="'containerId'"
      transition-duration="0.3s"
      item-selector=".item"
      class="masonryWrap"
    >
      <div
        v-for="(item, index) in photoList"
        :key="index"
        v-masonry-tile
        class="masonryWrap_item item"
      >
        <img :src="item.src" width="100%" :alt="item.label" />
      </div>
    </div>
  </no-ssr>
</main>

styleタグ内

.main {
  width: 100%;
}
.masonryWrap {
  margin: auto;
  width: 90%;
}
.item {
  width: 100%;
  margin: 0 0 8px 0;
}
.item img {
  display: block;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .item {
    width: calc(100% / 3 - 32px);
    margin: 10px;
  }
}
@media screen and (min-width: 1440px) {
  .item {
    width: calc(100% / 4 - 32px);
  }
}

scriptタグ内

no-ssrコンポーネントを利用して部分的にSSRしないように設定します。
※こちらはデフォルトで登録されているコンポーネントなのでインストールする必要はありません。

import NoSSR from 'vue-no-ssr'
export default {
  components: {
    'no-ssr': NoSSR
  },
  data() {
    return {
      photoList: [
        {
          label: 'test1',
          src: 'https://placehold.jp/150x150.png'
        },
        {
          label: 'test2',
          src: 'https://placehold.jp/150x300.png'
        },
        {
          label: 'test3',
          src: 'https://placehold.jp/150x150.png'
        },
        {
          label: 'test4',
          src: 'https://placehold.jp/150x300.png'
        },
        {
          label: 'test5',
          src: 'https://placehold.jp/350x150.png'
        },
        {
          label: 'test6',
          src: 'https://placehold.jp/150x600.png'
        }
      ]
    }
  },
  // ページ読み込み時にタイル状に表示させる
  mounted() {
    if (this.$redrawVueMasonry === 'function') {
      this.$redrawVueMasonry()
    }
  }
}

 

実際の動き

上記のソースを1ファイルにまとめて記述し動作確認すると下記のような表示・動作になると思います!

画面幅を変えてもタイル状に綺麗に並べてくれてます…!!

親要素にtransition-duration="0.3s" のようなプロパティを記載することでカスタマイズも可能です。
ちなみにtransition-duration は要素が移動する時間です。長ければ長いほどゆっくり移動します

transition-duration="0.1s"

transition-duration="2s"

他のプロパティの説明はこちらに記載されてますので興味のある方はご覧ください!

The following two tabs change content below.
Kazuki Hakozaki

Kazuki Hakozaki

2020年10月より入社しました!業務では主にフロントエンドを担当しております!