[JAVASCRIPT/JQUERY] 그리드정렬 masonry 플러그인 높이가 다른 이미지 정렬하기(옵션값설정)

https://masonry.desandro.com/

Masonry

그리드 관련 플러그인 masonry를 이용해 높이가 다른 이미지를 정렬할 수 있습니다. 

$('.grid').masonry({ //grid 영역안에 있는 아이템들을 정렬합니다. 
itemSelector: '.griditem', //griditem 정렬할 아이템입니다. 
columnWidth: 200, //각각 아이템의 width값을 지정합니다. 
gutter: 10, //아이템간의 margin값입니다.
horizontalOrder: true, // 높이에 상관없이 왼쪽에서 오른쪽으로 순서대로 위치합니다.

//false일 경우 높이에 따라 정렬됩니다. 
// originLeft: false //왼쪽부터 정렬
// originTop: false //바닥부터
// transitionDuration: '0.2s' //위치 전환 시간 - 반응형일경우 화면크기가 변함에 따라 아이템의 위치가 바뀔때 전환되는 시간 
});

 

 

 

 

 

horizontalOrder: true 인 경우 높이에 상관없이 순서가 왼쪽에서 오른쪽으로 정렬됩니다. 

 

 

false인 경우 아래와같이 정렬됩니다. (순서가 먼저인 쪽이 위로오도록 정렬됨)