jQuery Nested

Nested is a jQuery plugin which allows you to create multi-column, dynamic grid layouts. Unlike other libraries and jQuery plugins similar to Nested, this is (as far I as I’ve know) the first script out there that allows you a complete gap-free layout. How is this done? Nested does three things. It creates a matrix of all elements and creates a multi column grid, similar to other libraries and scripts out there. Then it scans the maxtric for gaps and tries to fill them by reordering the elements. This is exactly how I’ve seen other newer libraries, scripts and modifications behave but if you stop here, the result will sometime leave unwanted gaps as well. That is why I added the last step, an option to resize any element at the bottom of the grid that is bigger (or smaller if you prefer) than the gap to make the grid completely gap-free.

2012-11-13

Use a container element with a group of child items that use the chosen option selector setting (default: .box).

<div id="container">
  <div class="box size11"></div>
  <div class="box size12"></div>
  <div class="box size21"></div>
  <div class="box size22"></div>
  ...
</div>

Sizing of items are handled by adding sizeWH where W is the number of columns the box shall use and H is the number of rows the box shall use. E.g size15 equals width: 1 column and height: 5 rows The base column and row size is set by the minWidth option.

selector

Default .box

$("#container").nested({selector: '.box'});

minWidth

Default 50

$("#container").nested({minWidth: 100});

minColumn

Default 1

$("#container").nested({minColumn: 1});

gutter

Default 1

$("#container").nested({gutter: 1});

resizeToFit

Default true
If true, any box bigger than the gap will be resized to fill the gap.

$("#container").nested({resizeToFit: true});

resizeToFitOptions

Default option below

resizeAny

If true, any box bigger or smaller than the gap will be resized to fill the gap.: Default true

$("#container").nested({
  resizeToFit: true,
  resizeToFitOptions: { 
    resizeAny: true
  }
});

animate

Default false

$("#container").nested({animate: false});

animationOptions

Default options below

speed

A number of milliseconds to render each object (e.g. 200).: Default 20

duration

A number of milliseconds to run the animation (e.g. 300).: Default 100

queue

Queued objects or not.: Default true

complete

A function to be executed whenever the animation completes.: Default function()

$("#container").nested({
  animate: true,
  animationOptions: {
    speed: 100,
    duration: 200,
    queue: true,
    complete: onComplete
  }
});

Example 01

This example uses a custom width and the default gutter 20px

$("#example1").nested({
  minWidth: 20
});

Example 02

This example uses custom width and gutter

$("#example2").nested({
  minWidth: 100,
  gutter: 10
});

Example 03

Prepending and appending items

Prepend Append

$("#example3").nested({
  minWidth: 25,
  gutter: 1,
  animate: true,
  animationOptions: {
    speed: 10,
    duration: 20,
    complete: onComplete
  }
});

Prepend and Append buttons

$('#prepend').click(function(){
  var boxes = makeBoxes();
  $("#example3").prepend(boxes).nested('prepend', boxes);
});
  
$('#append').click(function(){
  var boxes = makeBoxes();
  $("#example3").append(boxes).nested('append', boxes);
});

Available at Github