Question

我正在使用jquery插件＆＃34; Masonry＆＃34;在我的首页上排列网格中的div / 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'
        });
}

编辑：正在调用该函数：

//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绑定到文档加载而不是准备就绪，这样它将按预期使用您的字体工作。例如（考虑到你正在使用jquery）：

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

或香草：

document.onload = use_masonry;

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

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

1 个答案: