Is there a jQuery plugin that will allow for shuffling of columns of divs?

Question

I have 4 divs which create 4 rows in a page. In each of these rows, are 4 square divs, so essentially we have a 4 x 4 block of (16) square divs.

When a user hovers over a div, the height is dynamically changed to be +40px. Right now, this adjusts the height of the parent container, and thusly pushes the rows below down.

What I want is to be able to push down ONLY the elements directly below the resized element.

Setup

<div class="row">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
</div>
<div class="row">
    <div class="element"></div>
    <div class="element blue"></div>
    <div class="element"></div>
    <div class="element"></div>
</div>
<div class="row">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
</div>
<div class="row">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
</div>

http://jsfiddle.net/zW53T/1/

Desired Affect

And, then when the blue element is resized, the following behavior would happen (hacked with css to demonstrate desired behavior):

http://jsfiddle.net/dYnLn/1/

Is this possible? I thought it might be when using masonry, but I have used masonry very little and would not know where to even begin.

Any advice/pointers would be greatly appreciated.

Answer 1

You can use Shuffle.js

Sample:

$(document).ready(function() {
  var $grid = $('#grid'),
      $sizer = $grid.find('.shuffle__sizer');

  $grid.shuffle({
    itemSelector: '.picture-item',
    sizer: $sizer
  });
});

Options available with Shuffle:

// Overrideable options
Shuffle.options = {
    group: 'all', // Filter group
    speed: 250, // Transition/animation speed (milliseconds)
    easing: 'ease-out', // css easing function to use
    itemSelector: '', // e.g. '.picture-item'
    sizer: null, // sizer element. Can be anything columnWidth is
    gutterWidth: 0, // a static number or function that tells the plugin how wide the gutters between columns are (in pixels)
    columnWidth: 0, // a static number or function that returns a number which tells the plugin how wide the columns are (in pixels)
    delimeter: null, // if your group is not json, and is comma delimeted, you could set delimeter to ','
    buffer: 0, // useful for percentage based heights when they might not always be exactly the same (in pixels)
    initialSort: null, // Shuffle can be initialized with a sort object. It is the same object given to the sort method
    throttle: $.throttle || null, // By default, shuffle will try to throttle the resize event. This option will change the method it uses
    throttleTime: 300, // How often shuffle can be called on resize (in milliseconds)
    sequentialFadeDelay: 150, // Delay between each item that fades in when adding items
    supported: Modernizr.csstransforms && Modernizr.csstransitions // supports transitions and transforms
};

Answer 2

Sorry I have not got the margins right yet, but you might want to try something like this using absolute positioning, changed on the fly (on a column basis):

JSFiddle: http://jsfiddle.net/TrueBlueAussie/dYnLn/5/

/* layout a single column based on element heights */
function layoutColumn(col) {
    var top = 0;
    $('.row').each(function () {
        var $row = $(this);
        var left = 0;
        var $cell = $row.children().eq(col);
        $cell.css({
                top: top
            });
        top = top + $cell.outerHeight() + ~~$cell.css("margin-top");
    });
}

/* layout the columns horizontal positions */
var top = 0;
$('.row').each(function () {
    var $row = $(this);
    var left = 0;
    /* set the horizontal positions */
    $row.children('.element').each(function () {
        var $cell = $(this);
        $cell.css({
            left: left
        });
        left += $cell.outerWidth() + ~~$cell.css('margin-left');
    });
    top = top + $row.outerHeight();
});

/* Layout all the columns */
for (var col = 0; col < $('.row').first().children().length; col++)
{
    layoutColumn(col);
}

$('.element').on('mouseenter', function(){
    $(this).addClass('blue').addClass('larger');
    layoutColumn($(this).index());
}).on('mouseleave', function(){
    $(this).removeClass('blue').removeClass('larger');
    layoutColumn($(this).index());
});

The layout code can obviously be simplified, but I threw this together quickly as an example of how to layout dynamically with jQuery.