META-INF.resources.bower_components.isotope._posts.custom-layout-modes.2012-01-03-masonry-column-shift.html Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of jwebmp-jqui-vertical-timeline Show documentation

The JWebSwing JQuery Vertical Timeline

There is a newer version: 1.2.0.3-jre17-rc1

Show newest version

---
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 %}