jQuery: Đồng vị chất lỏng chỉ hoạt động sau khi đổi kích thước

Question

Tôi đang gặp sự cố với lưới đồng vị chất lỏng Tôi đang thiết lập, một lưới 4 cột đơn giản, mỗi .grid-block có chiều rộng 24%, để lại 1% phụ cấp.
Vấn đề là mặc dù khi trang tải nó hiển thị dưới dạng lưới 3 cột cho đến khi cửa sổ trình duyệt được thay đổi kích thước và nó chụp thành 4 cột.
Dưới đây là một bản demo 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 } 
    }); 
    }); 
}); 

tôi không thể tìm ra lý do tại sao điều này xảy ra/làm thế nào để sửa chữa nó, nó đơn giản thực sự Tôi chỉ cố gắng để đạt được một mạng lưới 4 cột đơn giản khi trang tải và khi được thay đổi kích thước. Bất kỳ đề xuất sẽ được đánh giá rất cao!

Answer 1

jsFiddle Demo

Lưới điện được tối ưu hóa là bên trong các cài đặt cho smartresize. Bạn chỉ có thể thực hiện một cuộc gọi đến chức năng thay đổi kích thước khi trang tải như sau:

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