출처 : http://mcatcher3.cafe24.com/%ED%95%80%ED%84%B0%EB%A0%88%EC%8A%A4%ED%8A%B8-ui-%EB%A7%8C%EB%93%A4%EA%B8%B0/


이미 유행이 살짝 지났는지도 모르겠지만, 사이트를 구경하다보니 핀터레스트와 비슷한 UI를 적용한 사이트들이 눈에 띄어 나도 만들어보고자 도전했다. 검색해보면 남들이 만들어 놓은 쓸만한 제이쿼리 라이브러리들이 있지만, 공부삼아 만드는 것에 의미를 두고자 만들어 보았다. 대략적으로 아래 모습같은 UI형태로 만들고자 하였다.
  • 1. 브라우저 넓이에 따라 갤러리에서 보여지는 이미지 갯수가 달라져야한다. (모바일일때는 1개, pc에서는 사이즈가 넓어짐에 따라 2개, 3개, 4개까지 보여진다.)
  • 2. 각각의 이미지의 사이즈는 고정적이지 않고 랜덤하게 적용하고 싶고, 텍스트도 다양한 길이로 보여지게 하고 싶다. (가로사이즈는 width:100%를 적용해 동일하지만, 세로사이즈는 원본이미지 사이즈에 따라 비율에 맞게 자동으로 적용된다.)

[제작아이디어]

  • 1. 2단 3단 4단일때, 각각 세로로 배치되는 요소들의 index번호를 배열로 만들자.
  • 2. 앞에서 만든 배열로 2단 3단 4단일때, 요소들의 높이값을 배열로 만들자.
  • 1번의 index번호 배열과 2번의 높이값 배열의 값으로 브라우저사이즈에 따라 요소가 재배치될때, 요소들의 ‘left’, ‘top’ 값을 적용해주자.

[결과물]

브라우저 사이즈에 따라 1단, 2단, 3단, 4단으로 배치되게 만들었고, 세로 사이즈는 랜덤하게 만들었다. 아래 링크에서 결과물을 확인할 수 있다. http://mcatcher3.cafe24.com/html/randomgallery/gallery.html

[JS코드]