๋ฐ์ํ
๐masonry Layout
masonry๋ ๊ฑด๋ฌผ์ ๋ฒฝ, ๋๋ฒฝ ๋ฑ์ผ๋ก ๋ฒฝ๋์ ์๋ ๊ณต์ฌ๋ฅผ ๋งํ๋ค.
๋ณดํต ์ด๋ฐ ๋ ์ด์์์ ํํฐ๋ ์คํธ ์คํ์ผ์ด๋ผ๊ณ ํด์
๋์ด๊ฐ ๋ค๋ฅธ ๊ฐ์์ ์นด๋๋ค์ ๋์ด์ ๋ง์ถฐ ๋ฑ๋ฑ ๋ค์ด๋ง๋ ํ์์ ๋ ์ด์์์ด๋ค.
๐ฉ๐ปvueํ๋ก์ ํธ์์ masonry ๋ ์ด์์ ์ด์ฉํ๊ธฐ
์ค์ ๋ก ๋ง๋ค๋ ค๋ฉด, npm ์ค์ vue-masonry-css๋ฅผ ์ด์ฉํ๋ฉด ์์ฝ๊ฒ ์ ์ฉํ ์ ์๋ค.
vue-masnory-css
vue์์ masnory ๋ ์ด์์์ ๋ง๋ค์ด์ค npm์ด ์กด์ฌํ๋ค.
์ฌ์ฉ๋ฐฉ๋ฒ์ ๊ทธ๋ฅ npm install๋ง ํด์ฃผ๋ฉด ๋๋ค.
npm i vue-masonry-css --save
plugins/client.js
import Vue from 'vue'
import VueMasonry from 'vue-masonry-css'
Vue.use(VueMasonry);
sample.vue
<template>
<div>
<masonry :cols="3" :gutter="10" class="card-style">
<div v-for="(item, index) in 7" :key="index">
<img :src="require(`~/assets/images/${item}.jpg`)"/>
</div>
</masonry>
</div>
</template>
<style>
.card-style > div > div {
border-radius: 5px;
padding:20px;
margin:0 0 5px 0;
}
.card-style > div > div > img {
width:100%;
}
</style>
์ํ ํ๋ฉด
ํด๋น ์ฝ๋๋ก ์ ์ฉ์ ํด๋ณด๋ฉด,
๋์ด๊ฐ ๋ค๋ฅธ ์ด๋ฏธ์ง๋ฅผ ๋ฃ์ด๋ ์์์ ์ธํ ์ด ๋๋ค.
๋ฐ์ํ