You're going to laugh at how easy this is to do, but you will need to modify the plugin (demo).
Basically, I changed line 82 - 85 from this (all that needed changing was top
to bottom
but I added both so you can switch back and forth):
var position = {
left: props.colW * shortCol + props.posLeft,
top: minimumY
};
to this:
var position = (opts.fromBottom) ? {
left: props.colW * shortCol + props.posLeft,
bottom: minimumY
} : {
left: props.colW * shortCol + props.posLeft,
top: minimumY
};
Then added the option in the defaults:
// Default plugin options
$.fn.masonry.defaults = {
singleMode: false,
columnWidth: undefined,
itemSelector: undefined,
appendedContent: undefined,
fromBottom: false, // new option
saveOptions: true,
resizeable: true,
animate: false,
animationOptions: {}
};
Now you can just use the plugin like this:
$('#masonry').masonry({ fromBottom: true });
Update: I also forked the repository on github, so you can just download the changes if you don't want to do them yourself.