Jquery Masonry 不适用于 Google 字体答案

【问题标题】：Jquery Masonry not working with Google FontsJquery Masonry 不适用于 Google 字体
【发布时间】：2013-05-28 02:33:43
【问题描述】：

我发现 Masonry 中的重叠问题是由于在 Masonry 脚本之后加载 Google 字体引起的。我添加了以下代码来解决这个问题，但现在 Masonry 不起作用。实际上，看起来 Masonry 正在工作一瞬间，然后突然停止工作。

$(document).ready(function () {
  WebFont.load({
    google: {
      families: ['Chivo']
    }
  });
  WebFontConfig = {
    active: function() {
      $('#archive').masonry({
          itemSelector : '.item',
          columnWidth: 350,
          gutterWidth: 20
      });
    }
  };
});

【问题讨论】：

标签： jquery-masonry google-webfonts

【解决方案1】：

看起来 Google WebFontLoader 事件仅在字体异步加载时才有效。我应该更仔细地阅读文档。这是我的功能代码最终的样子......

$(document).ready(function () {

  WebFontConfig = {
    google: {
      families: ['Chivo']
    },
    active: function() {
      $('#archive').imagesLoaded(function(){
        $('#archive').masonry({
            itemSelector : '.item',
            columnWidth: 333,
            gutterWidth: 10
        });
      });
    }
  };

  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
        '://ajax.googleapis.com/ajax/libs/webfont/1.4.2/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();
});

【讨论】：

尽管使用了 imagesLoaded，但我一直在努力解决与 Masonry 重叠图像的问题，但后来意识到 Google 字体的高度让事情变得糟糕。这正是我需要的解决方案。（当然现在如果关闭 JS，字体将不会加载，但我可以忍受。）