사진첩을 만들고 있는데,
그냥 정사각형으로 늘어놓으니..
너무 안예쁘죠?
그래서 핀터레스트처럼 만들어보기로 했습니다.
핀터레스트에 사용한 레이아웃이름은 masonry layout이라고 하네요.
작업에 사용한 이미지들의 출처는 pixabay 입니다.
라이브러리로도 있는데,
어떠분이 css로 만들었더라구요! => darrengwon.tistory.com/569
이 분의 코드를 참고해서 react에 적용했습니다.
거의 다 가져왔지만, ㅎㅎ 그 중에서 수정 두가지를 했는데요.
상단에 마진이 생기는 버그? 부분과 hover 시에 흑백으로 보여지는 것을 반대로 수정했습니다.
라이브러리 => masonry.desandro.com/
Masonry
Install Download CDN Link directly to Masonry files on unpkg. Package managers Install with Bower: bower install masonry --save Install with npm: npm install masonry-layout Getting started HTML Include the Masonry .js file in your site. Masonry works o
masonry.desandro.com
먼저 react에 적용해보기 전에 테스트로 만든 코드입니다.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="wrap"></div>
</body>
</html>
CSS
.wrap {
column-count: 4;
column-gap: 1em;
}
.items {
display: flex;
justify-content: center;
margin-bottom: 1em;
}
.figure {
display: inline-block;
}
.figure:hover {
filter: grayscale(0.8);
}
.figure img {
width: 100%;
}
JS
const wrap = document.querySelector('.wrap');
const list = [
'https://cdn.pixabay.com/photo/2020/09/02/20/52/dock-5539524__340.jpg',
'https://cdn.pixabay.com/photo/2021/02/03/13/54/cupcake-5978060__340.jpg',
'https://cdn.pixabay.com/photo/2020/05/25/20/14/holland-iris-5220407__340.jpg',
'https://cdn.pixabay.com/photo/2020/10/08/17/39/waves-5638587__340.jpg',
'https://cdn.pixabay.com/photo/2019/01/30/11/17/zebra-3964360__340.jpg',
'https://cdn.pixabay.com/photo/2021/02/01/13/37/cars-5970663__340.png',
'https://cdn.pixabay.com/photo/2019/06/05/10/34/mimosa-4253396__340.jpg',
'https://cdn.pixabay.com/photo/2020/08/04/14/42/sky-5463015__340.jpg',
'https://cdn.pixabay.com/photo/2021/02/03/13/54/cupcake-5978060__340.jpg',
'https://cdn.pixabay.com/photo/2020/01/09/01/00/the-eye-on-the-greek-4751572__340.png',
'https://cdn.pixabay.com/photo/2021/01/30/12/19/couple-5963678__340.png',
'https://cdn.pixabay.com/photo/2021/01/23/07/53/dogs-5941898__340.jpg',
'https://cdn.pixabay.com/photo/2020/06/15/01/06/sunset-5299957__340.jpg',
];
for (i = 0; i < list.length; i++) {
const items = document.createElement('div');
const figure = document.createElement('div');
const img = document.createElement('img');
items.classList.add('items');
figure.classList.add('figure');
img.src = list[i];
figure.append(img);
items.append(figure);
wrap.append(items);
}
list 배열로 반복문을 돌려서 돔을 생성해서 append 시켜주는 형태로 테스트 코드를 만들었습니다.
결과물은 아래와 같이 잘 나옵니다.
예쁘게 잘 나오네요. 굿굿
css에서 wrap에 column-count: 4;의 숫자를 조절하면 가로로 늘어 놓을 사진의 수를 늘릴 수 있습니다.
자 그럼 react에 적용한 코드입니다.
import React, { useCallback, useEffect, useState } from 'react';
import styled from 'styled-components';
const Wrap = styled.div`
padding-bottom: 6%;
column-count: 4;
column-gap: 1em;
`;
const Items = styled.div`
display: flex;
justify-content: center;
margin-bottom: 1em;
cursor: pointer;
`;
const Figure = styled.div`
display: inline-block;
filter: grayscale(0.8);
&:hover {
filter: none;
}
`;
const Image = styled.img`
width: 100%;
`;
const Card = () => {
const sample = [
'https://cdn.pixabay.com/photo/2020/09/02/20/52/dock-5539524__340.jpg',
'https://cdn.pixabay.com/photo/2021/02/03/13/54/cupcake-5978060__340.jpg',
'https://cdn.pixabay.com/photo/2020/05/25/20/14/holland-iris-5220407__340.jpg',
'https://cdn.pixabay.com/photo/2020/10/08/17/39/waves-5638587__340.jpg',
'https://cdn.pixabay.com/photo/2019/01/30/11/17/zebra-3964360__340.jpg',
'https://cdn.pixabay.com/photo/2021/02/01/13/37/cars-5970663__340.png',
'https://cdn.pixabay.com/photo/2019/06/05/10/34/mimosa-4253396__340.jpg',
'https://cdn.pixabay.com/photo/2020/08/04/14/42/sky-5463015__340.jpg',
'https://cdn.pixabay.com/photo/2021/02/03/13/54/cupcake-5978060__340.jpg',
'https://cdn.pixabay.com/photo/2020/01/09/01/00/the-eye-on-the-greek-4751572__340.png',
'https://cdn.pixabay.com/photo/2021/01/30/12/19/couple-5963678__340.png',
'https://cdn.pixabay.com/photo/2021/01/23/07/53/dogs-5941898__340.jpg',
'https://cdn.pixabay.com/photo/2020/06/15/01/06/sunset-5299957__340.jpg',
];
return (
<Wrap>
{sample.map((v, i) => {
return (
<Items key={i}>
<Figure>
<Image src={v} />
</Figure>
</Items>
)
})}
</Wrap>
);
};
export default Card;
이렇게 해서 완성!
움직이는 것도 확인해봅시다.
