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

我正在使用jquery插件“砌体”将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 */ 
}

有时，当页面第一次加载时（即缓存清除），砌体插件或多或少地生成网格，除了不是具有偶数的X和Y尺寸的排水沟，而是一些垂直排水沟比他们应该大。

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

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

来源

2014-08-29 Spokes

您的自定义字体比正常字体更宽和/或更高，因此当砌体计算框的宽度/高度时，它会在您的字体下载/应用之前进行确认，并且会计算螺纹。

解决方法是将您的use_masonry绑定到文档加载而不是就绪，这样它将按照您的字体预期的那样工作。例如（考虑你是使用jQuery）：

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

或香草：

document.onload = use_masonry;

或者使用waitForWebfonts()功能与use_masonry()内（也这里面相同的问题，有知道什么时候其他很酷的方式字体已成功加载，如WebFont加载程序等）

来源

2014-08-29 20:48:41 RaphaelDDL

我的歉意 - 我从记忆中了解函数的调用方式。我相应地编辑了上述文章。 – Spokes 2014-08-29 20:57:49

@Spokes你肯定有''（“img”）load（function（）{'？你在每个图像加载时都调用'use_masonry'？ – RaphaelDDL 2014-08-29 21:01:09

我想这是在尝试过一个骇人听闻的解决方案后其他一些基本上产生相同问题效果的东西，我只是尝试了您的waitForWebfonts（）建议，似乎已经解决了这个问题，所以我现在可以调整代码效率。 – Spokes 2014-08-29 21:04:38

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

回答

相关问题