jQuery Columnizer plugin only working correctly on window resize
I'm using the jQuery Columnizer plugin, and I'm running into a weird problem. Using 3 columns, I columnize content from a hidden <div>
into a target <div>
. It distributes only one paragraph to each of the first two columns and then puts all the remaining paragraphs into the last column.
The strange thing is that it auto-corrects itself when the window is resized. I'm guessing it has something to do with the target <div>
resizing since opening a firebug console window also causes it to auto-correct itself. Setting lastNeverTallest:true
doesn't seem to do anything.
$('#hidden-about').columnize({
columns: 3,
target: '#interiors',
lastNeverTallest: true,
doneFunc: function() {
$('#interiors').css开发者_如何转开发('white-space', 'normal');
$('#interiors').fadeIn(200);
}
});
Thanks for any suggestions!
Make sure that's it's running after the DOM elements are ready by wrapping it appropriately, like this:
$(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({ ... });
});
If that doesn't resolve the issue, you can manually invoke the event it's bound to re-rendering on, using .resize()
like this:
$(window).resize();
精彩评论