핀터레스트 레이아웃 MASONRY 사용하기

핀터레스트 레이아웃 masorny 만들기

갤러리 이미지들이 모두 사이즈가 동일하면 좋겠지만 비율과 사이즈가 너무 다를때 꽤나 지저분 해보입니다.

그런데 masonry 레이아웃을 사용하면 간편하게 정리됩니다. 

핀터레스트처럼.

핀터레스트의 레이아웃은 이렇게 생겼어요. 

핀터레스트 캡쳐사진이예요. 내 관심사가 너무 적날히 드러나서 괜히 민망.

방법을 간단히 설명하면 MASONRY 플러그인을 사용합니다.ㅎㅎㅎ

제이쿼리를 이용해서 HTML에 태그를 다 적지 않고 이미지를 가지고 왔고, 

이미지를 가지고 오다보니 이미지가 다 로드 된 다음 레이아웃이 실행되도록 했어요.

처음에 그냥 연결하다 보니 처음 열렸을때 버그가 생기더라고요.

html부터 만들어 보아요. 

HTML

 <div class="all_wrap"></div>

지난번에 올린글에서처럼 제이쿼리로 이미지를 불러올꺼라서 html은 무진장 심플합니다.

지난번 올린글 -> 여기클릭

CSS

.all_wrap{margin: 0 auto;}        
.all_wrap div{width: 200px;margin: 3px;}
.all_wrap img{width: 100%; border-radius: 10px;}
.all_wrap p{margin: 0;font-size: 10px;padding:0 0 10px 15px;}

CSS로 이미지를 둥글게하고 여백을 만들어 줬어요.

JQUERY

<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.js"></script>

masonry cdn을 연결합니다

cdn은 masonry 홈페이지에서 가져왔어요.

var $grid = $('.all_wrap').imagesLoaded( function() {
  $grid.masonry({
      itemSelector: '.grid-item',
      fitwidth: true
  });
});

그리고 옵션을 적어줍니다.  

옵션은 MASONRY 홈페이지에서 가져왔습니다.

활용할 수 있는 방안을 여러개 적어놓았는데, 첫번째 방법을 사용하자 버그가 생겼어요. 

이렇게 사진들이 겹쳐서 나옵니다. 

사용했던 제이쿼리

 $('.all_wrap').masonry({
  // options...
  itemSelector: '.grid-item',
  fitwidth: true
});

그래서 다시 사진이 로드가 다 된 후에 적용되로록 제이쿼리를 바꿨어요.

(바꾼 제이쿼리가 처음에 적어논거예요.)

그러면 쉽게 반응형 핀터레스트 레이아웃 완성.

완성샷입니다. 

내 벚꽃사진들 흐흐

포트폴리오용이나 갤러리로 사용하면 좋을 것 같은 마손리레이아웃이였습니당.

**열심히 적었으나 오류가 있을 수 있으니 너무 신뢰하지 마세요:) ㅎㅎ