jquery - 砌体网格布局插件在与自定义字体一起使用时生成垂直间隙

Question

我正在使用 jquery 插件“Masonry”在首页的网格中排列 div/单元格。这些 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'
        });
}

编辑:函数被这样调用:

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

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

有使用自定义字体的 CSS:

@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 */
} 

有时，当页面首次加载时(即缓存已清除)，Masonry 插件或多或少会生成它应该生成的网格，除了 X 和 Y 维度的间距，一些垂直间距是比他们应该的大。

重新加载页面或调整窗口大小时，不再出现此问题。如果清除浏览器的缓存，问题有时会再次出现。当不使用自定义字体时，问题似乎消失了。

关于可能发生的事情以及如何解决它的任何想法？

Answer 1

您的自定义字体比普通字体更宽和/或更高，因此当 Masonry 计算框的宽度/高度时，它会在您的字体被下载/应用之前完成，这会影响计算。

解决方法是将您的 use_masonry 绑定(bind)到文档加载而不是准备就绪，这样它将按预期与您的字体一起工作。例如(考虑到您正在使用 jquery):

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

或 Vanilla :

document.onload = use_masonry;

或者使用waitForWebfonts()使用 use_masonry() 函数(也在同一个问题中，还有其他很酷的方法可以知道何时成功加载字体，例如 WebFont Loader 等)