Script / CSS

G1sUtil.js

G1sBlogger.js

G1sNavigationList.js

G1sCode

G1sTagList

Posts List

2012년 4월 8일 일요일

[Layout] Pinterest 방식의 레이아웃 정렬

요즘 소셜 큐레이션 서비스인 http://pinterest.com가 큰 인기를 끌고 있는 데요. 무엇보다도 세로 종대로 정렬된 이미지 레이아웃이 눈에 띕니다.


가로로 길이가 긴 이미지보다는 세로로 길이가 긴 이미지(웹툰, 인포그래피 등)가 많은 요즘 상황에 딱 알맞은 레이아웃인 듯 합니다.

보기도 깔끔하고... 해서 이와 같은 레이아웃을 구현해 봤습니다. 아래가 제가 구현한 예시구요.
원래는 브라우져의 크기가 변함에 따라 레이아웃도 자동으로 변화해야 하지만....
블로그 내에서는 해당 방식의 적용이 안되 약간의 수정을 가한상태입니다.

한번 브라우져 창의 크기를 조절해 보시면 창 크기에 비례해서 이미지 배열이 바뀌는 것을 확인 하실 수 있습니다.



댓글 or 주석란 Test
댓글 or 주석란 Test 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈 줄바꿈
댓글 or 주석란 Test
댓글 or 주석란 Test - 자동 줄바꿈. 자동 줄바꿈. 자동 줄바꿈. 자동 줄바꿈.
댓글 or 주석란 Test
댓글 or 주석란 Test
댓글 or 주석란 Test
댓글 or 주석란 Test
댓글 or 주석란 Test
댓글 or 주석란 Test
이미지 출처는 http://pinterest.com 입니다.

댓글 6개:

  1. 제일 초기에 height 값을 적용 할 수는 없나요?
    지금은 하드코딩으로 이미지 height 값이 주어 져 있네요..

    자동으로 할 수는 없나요? ㅠ

    답글삭제
    답글
    1. 샘플 이미지를 그대로 핀터레스트에서 긁어왔더니 그런가 보군요.
      자동으로 이미지 url만 있으면 원본 width, height 를 불러와서 할 수 없냐는 말씀이시죠? 물론 가능합니다.
      위쪽 3개의 메뉴 중에 Gallery 가 피카사에 이미지를 자동으로 불러와서 pinterest 식의 레이아웃을 입힌 건데요.
      약간 문제가 있어서 제대로 width/height 값을 못 불러 오는 경우도 있긴 하네요.
      이 점은 추후에 수정해야 할 듯 하지만.... 아무튼 가능은 할 듯 합니다.

      삭제
  2. 감사합니다 궁금했던것을 알아가네요.....

    답글삭제
    답글
    1. 이런 식으로 구현 되어 있다는게 아니라 이런 식으로도 만들 수 있다거라서요. ^^

      삭제
  3. 말씀대로 약간 문제가 있습니다
    길이값을 잘 못가져 오네요
    수정하셨다면 알려 주시면 고맙겟습니다
    아니면 참고 url 이라도 ..ㅋㅋ 부탁 드립니다

    답글삭제
    답글
    1. 죄송합니다. 아직 수정된 것은 없네요..
      블로그에 신경을 계속 못쓰고 있어 이렇게 가끔 들어와서 댓글 다는게 다네요.;;;

      삭제