砌體網格佈局插件與自定義字體一起使用時會生成垂直間隙

我正在使用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

砌體網格佈局插件與自定義字體一起使用時會生成垂直間隙

回答

相關問題