13

Does anyone know how to make jQuery masonry stack from the bottom up? I wrote some rudimentary JS to stack things from bottom up but it couldn't do masonryish stuff like stacking the next brick on the shortest column and bricks that span multiple columns. Since I'm not good with Math, looking at the source code just makes me dizzy.

Stacking from bottom up

Anyone want to try?

Aen Tan
  • 3,141
  • 6
  • 28
  • 49
  • 4
    If you are posing a challenge, you will have to make the criteria more clear to ensure you get contestants. seems a tad open to interpretation to me... Where do the blocks come from, what sizes and shapes can they be, is ideal goal a flat top? I do like the diagram though, and +1 for a cool question. – Brandon Frohbieter Mar 05 '11 at 19:54
  • +1 Nice question. Second the request for more specifics though. – polarblau Mar 05 '11 at 20:30

1 Answers1

19

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.

Mottie
  • 74,638
  • 25
  • 119
  • 230
  • Super awesome! Thanks fudgey! On another note, I added another parent element so I can position the whole stack at the bottom of this parent to simulate gravity. ([demo](http://aentan.com/test.html)) – Aen Tan Mar 06 '11 at 01:57