# 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 );
      }
    );