MosaicFlow 모자익플로우 알아보기

안녕하세요.

오늘은 모자익플로우(MosaicFlow) 플러그인을 소개드릴려합니다.

MosaicFlow는 먼저 감이 안잡히실거라 생각이 듭니다.

쉽게설명을드리면, 사진데이터를 표현해주고싶은데 흔하게 게시판형식으로 정리하는것이 아닌 사이즈에 맞춰서 흐름대로 놓는 방식을 말합니다.

예를들어 표현한곳이 '핀터레스트(Pinterest)' 입니다.

핀터레스트 : https://www.pinterest.co.kr/

핀터레스트를 경험해보신분이나 아니면 오늘 처음 접해보시는분은 '아~ 저런모양이 모자익 플로우' 이구나 이해하시면 됩니다.

이 플러그인은 제가 만든 플러그인은 아닙니다.

단순 소개 목적차 Github에서 가져온 자료라는것을 알려드립니다.

모자익플로우 (MosaicFlow)

github에 나와있는 샘플 강아지 사진들 입니다.

서로 다른 크기의 모양에도 문제없이 정리 해줍니다.

제작자 sapegin, 다른 플러그인도 많이 있지만 사용하기 가장편하였습니다.

링크참고해주세요. ^^

MosaicFlow (sapegin) 참고 링크 : https://github.com/sapegin/jquery.mosaicflow

사용법은 아주 간단합니다.

먼저 플러그인을 다운받아 사용할 프로젝트에 include 시켜주시면 됩니다.

jquery.mosaicflow.js 혹은 jquery.mosaicflow.min.js 중 하나 입니다.

(min파일은 미니멈을 의미하구요 최소한 필요요소만 담아놓은 파일입니다.)

전 용량상 큰차이가없어서 원본파일을 사용하였습니다.

또한! CDN을 통하여 바로 연결하여 사용할수도 있습니다.

지금부터 소개드릴내용은 제가 첨부해놓은 링크안에서 모두다 확인할수있으며 기본적인사항 입니다.

확장 기능을 원하시는분은 들어가셔서 자세히 읽어보시면 됩니다.

HTML 소스에서 작업해야할 내용입니다.

먼저, CDN이나 플러그인을 직접다운받아 적용시켜줍니다. 

(위 사진은 모두다 포함시켰습니다, 실제로는 1개의 연결만하면 됩니다.)

그리고 CSS를 수정할것이라면, CSS 스타일을 붙여넣어주시면됩니다.

적용결과 CSS가 없어도 기본으로 모양이 잡히긴하지만 디테일한부분은 꼭 필요 하실것 입니다.

그리고, 최종 표현할 사진이나 텍스트 등

class를 mosaicflow안에 mosaicflow__item으로 묶어주시면 정상 작동합니다.

잘모르겠으신분들은 샘플파일을 다운받아서 소스를 열어보시면 될것 같습니다.

비교적 간단한 플러그인 소개 였습니다.