--- title: Masonry Column Shift layout: default category: custom-layout-modes ---

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

{% highlight javascript %} 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 ); } ); {% endhighlight %}