[jQuery] masonry 레이아웃 플러그인 Note

Development Javascript

[jQuery] masonry 레이아웃 플러그인 Note

퍼센테이지 사이즈를 사용할때 레이아웃이 틀어질때 해결볍

실행할때 계산이 틀어져서 형태가 깨지는 현상이 자주 나타난다. 그래서 항목에 왼쪽 마진을 -1px 옮기는 꼼수를 사용해야한다.

.itemsList .item {
  width: 33.33%;
  margin-left: -1px;
  transform: translateX(1px);
}

출처: http://stackoverflow.com/questions/8446061/jquery-masonry-with-percentage-width

아이템 생성시 애니메이션 변경

$obj.masonry({
  transitionDuration: '500ms',
  hiddenStyle: { opacity: 0, transform: 'translateY(30px)' },
  visibleStyle: { opacity:1, transform: 'translateY(0)' },
});
  • hiddenStyle: 아직 등장하지 않았을때의 css속성 (from)
  • visibleStyle: 등장했을때의 css속성 (to)