[jQuery] masonry 레이아웃 플러그인 Note
- Nest
- Development
- Category
- Javascript
- Hit
- 703
- Star
- 0
퍼센테이지 사이즈를 사용할때 레이아웃이 틀어질때 해결볍
실행할때 계산이 틀어져서 형태가 깨지는 현상이 자주 나타난다. 그래서 항목에 왼쪽 마진을 -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)