last1here/gridded.js

A simple jQuery tile based grid.

#gridded.js

A simple jQuery tile based grid.

Examples

Simple

This is a simple way to call Gridded where you can supply the width and height for the tiles as data attributes. Demo

jQuery

$(function() {
	$('.container').gridded();
});

HTML

<div class='container'>
  <div class='item' >1</div>
  <div class='item' >2</div>
  <div class='item' data-w="2">3</div>
  <div class='item' data-w="2" data-h="1">4</div>
  <div class='item' >5</div>
  <div class='item' >6</div>
  <div class='item' data-h="2">7</div>
  <div class='item' >8</div>
  <div class='item' >9</div>
  <div class='item' >10</div>
  <div class='item' data-w="1">11</div>
</div>

Options

• numOfCols

Todo's

• Allow to set predefined sizes to choose from

{
  sizes: array(1=>2, 3=>33) 
}

key being width value being height

gridded.js's Issues

Add a callback

Add a callback to fire every time an item is placed?

When using breakpoints item sizes can become deformed

When using breakpoints with noOfCols if you have an item with w:3 h:3 if you have a breakpoint which changes noOfCols to 2 an the browser is resized the item will end up with w:2 h:3 and will be set like this till refresh. Due to line 98 & 99

else if (i.data('w') > that.options.col)
   i.data('w', that.options.col);