처음에는
https://pang2h.tistory.com/227
masonry 레이아웃 구성하기
이런 식으로 이미지, 혹은 내부 요소를 구성하는 방법이 필요해서 검색 좀 해봤습니다. 개인적으로 몇몇과 함께 하고 있는 프로젝트에서 갤러리 레이아웃이 필요해서요. 이 스타일로 페이지를
pang2h.tistory.com
이분의 코드를 사용했다. 그런데 말야...
너무 느리다.. 이미지 200개가 뜨는데 10초 걸리는게 말이 되나?
그래서 엎었다.
그래서 찾아보니까 우연히보니 이미 잘 만들어놓은 코드가 있더라.
무엇보다 JS로 컨트롤하는 것이 아니라 CSS로 컨트롤해서 더 빠르고.
<!doctype html>
<html>
<head>
<style>
#columns{
column-width: 18rem;
column-gap: 15px;
}
#columns figure{
display: inline-block;
border:1px solid rgba(0,0,0,0.2);
margin:0;
margin-bottom: 15px;
padding:10px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.5);;
}
#columns figure img{
width:100%;
}
#columns figure figcaption{
border-top:1px solid rgba(0,0,0,0.2);
padding:10px;
margin-top:11px;
}
</style>
</head>
<body>
<div id="columns">
<figure>
<img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/cinderella.jpg">
<figcaption>Cinderella wearing European fashion of the mid-1860’s</figcaption>
</figure>
<figure>
<img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/rapunzel.jpg">
<figcaption>Rapunzel, clothed in 1820’s period fashion</figcaption>
</figure>
<figure>
<img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/belle.jpg">
<figcaption>Belle, based on 1770’s French court fashion</figcaption>
</figure>
<figure>
<img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/mulan_2.jpg">
<figcaption>Mulan, based on the Ming Dynasty period</figcaption>
</figure>
<figure>
<img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/sleeping-beauty.jpg">
<figcaption>Sleeping Beauty, based on European fashions in 1485</figcaption>
</figure>
<figure>
<img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/pocahontas_2.jpg">
<figcaption>Pocahontas based on 17th century Powhatan costume</figcaption>
</figure>
<figure>
<img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/snow-white.jpg">
<figcaption>Snow White, based on 16th century German fashion</figcaption>
</figure>
<figure>
<img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/ariel.jpg">
<figcaption>Ariel wearing an evening gown of the 1890’s</figcaption>
</figure>
<figure>
<img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/4273/tiana.jpg">
<figcaption>Tiana wearing the <i>robe de style</i> of the 1920’s</figcaption>
</figure>
</div>
</body>
</html>여기 내용 중 설명만 빼고 css만 가져갔다.
기본적으로 masonry 구조는 동일한 구조라 css 이름만 변경하니 엄청 빨라짐.(JS 후처리가 아닌 CSS로 컨트롤해서)
그리고 기존에 있던 이미지 200개중 30개만 부르고, 나머진 스크롤링으로 가져오는 방식으로 구현을 완료했다.
https://opentutorials.org/course/2473/13712
핀터레스트 스타일 레이아웃 만들기 (masonry) - 생활코딩
소개 masonry는 벽돌을 쌓는 공사, 석조라는 의미를 가지고 있습니다. 사진 공유 서비스인 핀터레스트가 인기를 끈 이후에 핀터레스트와 같은 스타일의 레이아웃이 크게 인기를 끌었는데요. 이러
opentutorials.org
+++ caution +++
귀찮아서 기존 코드에 적용하면서 figure 대신 div를 썼는데, 젠장...
옆으로 추가되더라 이걸 어찌해결하나 했는데, 댓글에 해결방안이 있더라.
figure : 블록태그 :: figure태그 다음에 figure태그가 또 들어오면 밑으로 줄바뀜
img : 인라인태그 :: 연속으로 오면 옆으로 나열됨
figcaption : 블록태그 :: 밑으로 줄바뀜
'취업 > 자바스크립트' 카테고리의 다른 글
| [JS] input 숫자만 또는 숫자, 영문만 입력하게하기 (0) | 2022.11.16 |
|---|---|
| [JS] AJAX 로딩바 사용시 async: false를 꺼줘야 한다. (0) | 2022.08.08 |
| [Node.js] text파일 읽어와서 excel파일로 저장하기. (0) | 2022.07.29 |
| [owlCarosel] ver 1.2.1 mouse event detect! 마우스 이벤트 감지 (0) | 2022.07.28 |
| [JS] 부트스트랩 3.* Navbar 현재 페이지 active 상태로 두기 (0) | 2022.07.28 |