masonry filter에 관해서...
본문
제가 masonry lightbox를 이용해서 공부하다...필터 기능을 추가해서 넣어봤는데요...
1)masonry.html파일에서는
이미지들이 크기에 맞추어서 벽돌쌓이듯이 제대로 이빨이 맞게 쌓이는 모습인데요...
물론 lightbox도 잘되구요...
2)masonryfilter.html파일에서는
filter기능을 넣으니까 이미지들이 masonry.html파일처럼 빈틈없이 이미지가 쌓이는게 아니라
꼭 이빨빠진것 처럼 보기싫게 쌓이는 모습이 보이는데요...
해결책이 없을까요?
# 링크 1
http://juno0731.dothome.co.kr/masonry.html
# 링크 2
http://juno0731.dothome.co.kr/masonryfilter.html
위에 링크 1과 2가 제가 테스트삼아 하고 있는 상황입니다.
혹시 해결책이 없을까요? 고수님들의 고견을 부탁드립니다.
무더위에 모두들 건강에 유의하시고 행복한 하루되세요. 감사합니다.
답변 2
링크1에 적용한 css나 style을 링크2에도 적용한 것이 맞으신가요?
네...CSS로 되있어요
/* 미소너리 시작 */
* { box-sizing: border-box; }
/* force scrollbar */
html { overflow-y: scroll; }
body { font-family: sans-serif; }
/* ---- grid ---- */
.grid, .masonry-1 {
background: #fff;
}
/* clear fix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ---- .grid-item ---- */
.grid-sizer,
.grid-item {
width: 33.333%;
padding:0.5%;
}
.grid-item {
float: left;
}
.grid-item img {
display: block;
max-width: 100%;
}
/* 미소너리 끝 */