Jquery चिनाई: खिड़की का आकार बदलने तक गलत गटर

Question

मेरे पास तीन कॉलम के साथ प्रतिशत-चौड़ाई वाला कंटेनर है। मैं इस तरह इन स्तंभों निश्चित-चौड़ाई गटर दे:

width: -webkit-calc(33.33% - 16px); 
width: -moz-calc(33.33% - 16px); 
width: calc(33.33% - 16px); 

यह मेरा चिनाई कोड है, के रूप में खिड़की आकार दिया जाता है जिसमें मैं स्तंभों की संख्या बदलें:

$(window).load(function() { 
    var columns = 3, 
    setColumns = function() { columns = $(window).width() > 959 ? 3 : $(window).width() > 640 ? 2 : 1; }; 

    setColumns(); 
    $(window).resize(setColumns); 

    $('#main-posts').masonry({ 
     itemSelector : '[class*=main-posts-]', 
     columnWidth : function(containerWidth) { return containerWidth/columns; } 
    }); 
}); 

गटर colums के बीच पृष्ठ लोड होने पर बहुत बड़े होते हैं, लेकिन खिड़की का आकार बदलते समय वे स्वयं को सही करते हैं। कोइ इसमें मेरी मदद कर सकता हैं? http://keithpickering.net/redesign/

कंटेनर पर हरे रंग की पृष्ठभूमि है बस है जो दर्शाता है क्या हो रहा है:

यहाँ नया स्वरूप, जो बहुत ही विकास की शुरुआत में ही है के लिए लिंक है।

धन्यवाद दोस्तों।

Answer 1

एक ही समस्या थी, पृष्ठ लोड होने के बाद लेआउट विधि को कॉल करके इसे हल किया गया। सुरुचिपूर्ण नहीं है लेकिन यह काम करता है।

$(window).load(function(){ 

    var $container = $('#container'); 
    $container.masonry({ 
     gutter: 0, 
     itemSelector : '.content-box', 
     columnWidth: ".grid-sizer", 
     isResizable: true, 
    }); 
    /// call the layout method after all elements have been loaded 
    $container.masonry(); 

}); 

http://masonry.desandro.com/methods.html#layout