javascript/jQuery
[JAVASCRIPT/JQUERY] 그리드정렬 masonry 플러그인 높이가 다른 이미지 정렬하기(옵션값설정)
알찬 퍼블리셔
2019. 4. 15. 11:32
728x90
반응형
그리드 관련 플러그인 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인 경우 아래와같이 정렬됩니다. (순서가 먼저인 쪽이 위로오도록 정렬됨)
728x90
반응형