jQuery：流體同位素僅在調整大小後才起作用

Question

我在設置流體同位素網格時遇到了一些問題，簡單的4列網格，每個.grid-block的寬度爲24％，剩下1％的折扣。
雖然這個問題是，當頁面加載它顯示爲3列網格，直到瀏覽器窗口調整大小，它會捕捉到4列。
這裏有一個演示的jsfiddle：http://jsfiddle.net/BVzTV/4/
的jQuery：

$(document).ready(function() { 
var $container = $('#main-grid'); 

$container.isotope({ 
    itemSelector: '.grid-block', 
    animationEngine: 'best-available', 
    resizable: false, 
    masonry: { columnWidth: $container.width()/4 } 
    }); 

    $(window).smartresize(function(){ 
    $container.isotope({ 
    // update columnWidth to a percentage of container width 
    masonry: { columnWidth: $container.width()/4 } 
    }); 
    }); 
}); 

我想不通爲什麼發生這種情況/如何解決它，它其實很簡單，我只是想實現一個簡單的4柱網何時加載頁面以及何時調整大小。任何建議將不勝感激！

Answer 1

jsFiddle Demo

優化網格是用於smartresize設置內部。當頁面加載時，您可以只調用一次調用大小函數：

$(window).smartresize();//I know it seems kind of simple, but it works