Jquery Masonry from Bottom Up

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.

Masonry stack from bottom up

Replace this (starting at line 287):

var position = {
  top: minimumY + this.offset.y
};

with this:

var position = (this.options.fromBottom) ? {
  bottom: minimumY + this.offset.y
} : {
  top: minimumY + this.offset.y
};

Demo

Masonry js v4 from bottom up

Loot at the documentation https://isotope.metafizzy.co/options.html

There is a setting called originTop, should be what you need.

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.

jquery Isotope Custom Layout: masonry bottom

I have not seen any custom layout. But, recently I changed the Isotope's js to reflect the bottom up masonary.

On line 590, Change the following code

_positionAbs : function( x, y ) {   
  return { left: x, top: y };
},

to

_positionAbs : function( x, y ) {   
  return (this.options.fromBottom) ? { left: x, bottom: y } : { left: x, top: y };
},

and then set the fromBottom options to true while calling. Optionally, you can add the same property in $.Isotope.settings on line 330.

P.S. I know its been two months but it may help someone.

Masonry add a loader at the bottom to show more images are still loading

maybe you can try other way to show the loading image in the div before footer from the start like this

<div id="contentWrapper">
    <!-- Your Content -->
</div>
<div id="loader">
    <img src="/source/to/loadingimage.gif" />
</div>
<footer>
    <!-- Your Footer -->
</footer>

and give css to div loader

#loader { text-align:center }

and when all the image is appended, call

$('#loader').hide();

EDIT

count total image in the page that is hidden first

var totalImage = $('.artPost').length;

add class loaded in $items.imagesLoaded().progress( function( imgLoad, image ) function to declare if the images is already shown like this

$items.imagesLoaded().progress( function( imgLoad, image ) {
    // get item
    // image is imagesLoaded class, not <img>, <img> is image.img
    var $item = $( image.img ).parents( itemSelector );
    // un-hide item
    $item.show();
    // masonry does its thing
    msnry.appended( $item );
    $item.addClass('loaded');
});

then before return this; check if total loaded image is the same with total image with class artPost, like this

if (totalImage == $('.loaded').length)    // if you have other element with loaded class, add more selector to $('.loaded')
    $('#loader').hide();

and put it after $item.addClass('loaded'); inside $items.imagesLoaded().progress( function( imgLoad, image ) where the image is processed everytime it's loaded

---

Related Topics