팁 & 노하우

  • 목록
  • 아래로
  • 위로

masonry 라이브러리 사용시 세로방향 이미지 겹침 문제에 대한 해결방법

이니스프리

masonry 라이브러리(https://masonry.desandro.com/) 사용할 때 


이미지가 로딩되기 전에 masonry가 먼저 적용되면 이미지가 세로방향으로 겹치는 현상이 발생합니다.


이러한 문제를 해결하기 위해 imagesLoaded 플러그인을 추가로 사용하는 방법도 있지만,


다음과 같은 방법으로 테스트해보니 imagesLoaded를 사용하지 않고도 잘 되네요 ^^


?
1
2
3
4
5
6
$(window).load(function(){
  var $container = $('#container');
  $container.masonry({
    itemSelector: '.item'
  });
});


작성자
이니스프리 119 Lv. (2%) 4462610/115200000EXP

Make StudyForUs Great Again!

 

CSVpuymXAAAVVpd.jpg

댓글 0

권한이 없습니다.
번호 제목 글쓴이 날짜 조회 수
공지 [중요] 호스팅 만료와 관련하여 일부 수칙이 변경됩니다. 6 마스터 마스터 23.01.14.02:23 22055
240 오토셋 업그레이드가 중단되었네요! 4 이니스프리 이니스프리 19.07.29.18:30 517
239 PHP 7.4 beta 1 환경에서 그누보드 5.4.0.1 설치 가능 여부 이니스프리 이니스프리 19.07.23.13:37 504
masonry 라이브러리 사용시 세로방향 이미지 겹침 문제에 대한 해결방법 이니스프리 이니스프리 19.07.20.23:39 1345
237 [PHP] 파일을 읽어서 각 행을 리스트로 만들기 이니스프리 이니스프리 19.07.10.20:29 245
236 [파이썬] 명언 엑셀파일 to CSV 변환 스크립트 이니스프리 이니스프리 19.07.09.23:19 1420
235 [파이썬] OS에 따른 파일경로 표기방법의 차이와 관련하여 이니스프리 이니스프리 19.07.08.20:27 661
234 Selenium에서 파일 업로드할 때 파일을 선택하는 방법 이니스프리 이니스프리 19.07.02.23:45 2790
233 PyQt5의 designer.exe 경로 이니스프리 이니스프리 19.07.01.20:09 701
232 만년필 잉크를 직구할 때에는 온도와 관련된 문제를 주의하세요 이니스프리 이니스프리 19.07.01.07:19 304
231 (아래글에 이어서) 앱체크 라이선스 만료일에 주의할 점 이니스프리 이니스프리 19.05.18.14:16 339
230 앱체크 라이선스 갱신과 관련하여 이니스프리 이니스프리 19.05.11.14:43 405
229 ABBYY Finereader 완전 삭제 이니스프리 이니스프리 19.05.10.14:46 1026
228 AK120ii가 PC 연결이 안 될 때 이니스프리 이니스프리 19.05.08.21:03 428
227 아미나에서 Froala 에디터 사용이 가능해졌습니다 9 이니스프리 이니스프리 19.05.03.18:47 516
226 일본 배대지 휴무 - 골든위크 관련 이니스프리 이니스프리 19.04.21.21:22 391
225 크롬과 파이어폭스에서 마지막으로 닫았던 탭이나 창 다시 열기(Shift + Ctrl + T)의 차이 2 이니스프리 이니스프리 19.04.20.13:10 839
224 컴퓨터로 가운뎃점을 쉽게 입력해보자 6 image 슬기 title: 투명 아이콘슬기 19.04.19.14:18 409
223 윈도우키 + L로 잠금화면 진입하기 1 이니스프리 이니스프리 19.04.13.23:56 508
222 레오폴드 FC980C 30g 균등 모델 출시 image 이니스프리 이니스프리 19.04.13.23:51 446
221 크롬에서 방향키가 작동하지 않는 경우 해결책 1 이니스프리 이니스프리 19.03.31.11:56 2659

검색