사용자 정의 글꼴과 함께 사용할 때 세로 간격을 생성하는 메이슨 그리드 레이아웃 플러그인

Question

jquery 플러그인 "Masonry"를 사용하여 제 1면의 격자에 divs/cells을 정렬합니다. 각 div에는 이미지가있는 상단 div와 텍스트가있는 하단 div가 있습니다. 플러그인은 다음과 같이 기본적으로 적용됩니다

function use_masonry() { 
     var container = document.querySelector('#container'); 
     var msnry = new Masonry(container, { 
      transitionDuration: '0.2s', 
      isResizeBound:false, 
      gutter: 10, 
      gutterY:0, 
      itemSelector: '.divs_to_be_arranged' 
     }); 
} 

편집 : 함수가 다음과 같이 호출되는 : 때때로

@font-face { 
    font-family: 'leaguegothic-regular'; 
    src: url('fonts/leaguegothic-regular-webfont.eot'); /* IE9 Compat */ 
    src: url('fonts/leaguegothic-regular-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
     url('fonts/leaguegothic-regular-webfont.woff') format('woff'), /* Modern Browsers */ 
     url('fonts/leaguegothic-regular-webfont.ttf') format('truetype'), /* Safari, Android, iOS */ 
     url('fonts/leaguegothic-regular-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ 
} 

:

사용하는 CSS가있다

//called when page loaded/reloaded 
$("img").load(function() { 
    use_masonry(); 
}); 

$(window).resize(function() { 
    use_masonry(); 
}); 

사용자 정의 글꼴을 구현 페이지가 처음로드되면 (즉, 캐시가 비어 있음), Masonry 플러그인은 X와 Y 치수가있는 거터 대신 수직의 일부를 제외하고는 그리드를 어느 정도 생성합니다 배수구가 있어야하는 것보다 큽니다.

페이지를 다시로드하거나 창 크기를 조정하면이 문제가 더 이상 발생하지 않습니다. 브라우저의 캐시를 지우면 문제가 다시 발생합니다. 사용자 지정 글꼴을 사용하지 않으면 문제가 사라집니다.

어떤 일이 벌어지고 어떻게 해결되는지에 대한 아이디어가 있습니까?

Answer 1

사용자 정의 글꼴이 일반 글꼴보다 넓거나 높기 때문에, Masonry가 상자의 너비/높이를 계산할 때 글꼴이 다운로드되고 적용되기 전에 수행되고 계산이 실패합니다.

해결 방법은 use_masonry을 준비가 아닌 문서로드에 바인딩하는 것입니다. 이렇게하면 글꼴에 예상대로 작동합니다.

$(document).on('load',function(){ 
    use_masonry(); 
}); 

또는 바닐라 :

document.onload = use_masonry; 

또는이 같은 질문의 내부 내부 use_masonry() (와 waitForWebfonts() 기능을 사용하여이 때 아는 다른 멋진 방법이있다 (예를 들어, 당신이 jQuery를 사용하는 고려) 글꼴은 WebFont Loader와 같이 성공적으로로드되었습니다.)