Masonry Column Shift

Custom layout mode masonryColumnShift. Enabled columns of a Masonry layout to be shifted and not affect other columns. After the size of an item element has changed, you can trigger a special columnShiftOfItem method that will push the column down. This layout only works with item elements that have the same width

var $container = $('#container');

$container.isotope({
  itemSelector: '.shifty-item',
  layoutMode: 'masonryColumnShift'
});

$container.find('.shifty-item').hover(
  function() {
    $(this).css({ height: "+=100" });
    // note that element is passed in, not jQuery object
    $container.isotope( 'shiftColumnOfItem', this );
  },
  function() {
    $(this).css({ height: "-=100" });
    $container.isotope( 'shiftColumnOfItem', this );
  }
);