jQuery Masonry from bottom up jQuery Masonry from bottom up jquery jquery

jQuery Masonry from bottom up


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.