アイソトープjsの空白を削除

Question

グリッドの各アイテムの間にスペースがあります。 http://okbj.ca/最新のものをクリックするか、ウィンドウのサイズを変更すると、そのスペースが削除されます。リフレッシュするとスペースが戻ってきます。このスペースをどうやって削除するのですか？

私はchrome、explorer、microsoft edge、firefoxの最新バージョンを使用しています。それはそれらのすべてで動作していないようです。

Answer 1

これはOSX版Chrome、FirefoxとSafariの最新バージョンで正常に表示されますので、あなたのためのブラウザ固有の問題のようです。

問題では、Windows上で発生する表示されます。 2つのソリューションがあります。

醜いJavascriptをハック

火resizeイベント毎秒。これにより、プラグインはサイズを再計算します。

// cross-browser resize event 
var crossBrowserResize = function() { 
    var evt = document.createEvent('HTMLEvents'); 
    evt.initEvent('resize', true, false); 
    window.dispatchEvent(evt); 
}; 

// fire the event every second 
setInterval(function() { 
    crossBrowserResize(); 
}, 1000); 

使用するメディアクエリー代わり

グリッドのこのタイプは、純粋なCSSといくつかのメディアクエリを使用して容易に達成可能です。私は要素を調べ、いくつかのメディアクエリを使って、さまざまなブレークポイントでどのようにリサイズするかを調整しています。

/* 4 columns on tablet landscape and up */ 
@media screen and (max-width: 1024px) { 
    .block { 
    width: 25%; 
    } 
} 

/* 2 columns on tablet profile */ 
@media screen and (max-width: 720px) { 
    .block { 
    width: 50%; 
    } 
} 

/* 1 column on phone landscape or profile */ 
@media screen and (max-width: 480px) { 
    .block { 
    width: 100%; 
    } 
} 

Answer 2

崩壊は、（Chromeの）ウィンドウサイズ変更イベントでのみ発生します。グリッドがロードされたら、イベントをディスパッチすることができます

(function fixGrid() { 
    var img, grid = document.querySelector('.grid'); 
    if (grid) {img = grid.querySelector('img');} 
    if (img && img.height) { 
    window.dispatchEvent(new Event('resize')); 
    grid.style.opacity = 1; 
    } else { 
    if (grid) {grid.style.opacity = 0;} 
    setTimeout(fixGrid, 10); 
    } 
})();