jQuery Columnizer插件仅在窗口调整大小时正常工作

Question

我正在使用jQuery Columnizer插件 ，但遇到了一个奇怪的问题。 我使用3列，将内容从隐藏的<div>分为目标<div> 。 它仅将一个段落分配到前两列，然后将所有其余段落放入最后一列。

奇怪的是，当调整窗口大小时，它会自动更正。 我猜想它与目标<div>大小有关，因为打开Firebug控制台窗口也会导致它自动更正。 设置lastNeverTallest:true似乎没有任何作用。

$('#hidden-about').columnize({ 
    columns: 3, 
    target: '#interiors',
    lastNeverTallest: true,
    doneFunc: function() {
        $('#interiors').css('white-space', 'normal');
        $('#interiors').fadeIn(200);
    } 
});

感谢您的任何建议！

Answer 1

通过适当地包装，确保DOM元素准备就绪后，它就可以运行：

$(function() {  //document.ready shortcut
  $('#hidden-about').columnize({ ... }); 
});
//or...
$(document).ready(function() { 
  $('#hidden-about').columnize({ ... }); 
}); 
//or, if it depends on image sizing, make sure they're loaded with window.load
$(window).load(function() {  //runs after images are loaded
  $('#hidden-about').columnize({ ... }); 
});

如果那不能解决问题，则可以使用.resize()手动调用将要重新渲染的事件，如下所示：

$(window).resize();