jQuery FreeWall

by Fernando De Leon

HTML

<script src="http://vnjs.net/www/project/freewall/freewall.js"></script>
<div id="freewall" class="free-wall">
    <div class="size23 level1" id="menuContainer" >
        <div class="brick size21">TEXT here1</div>
				<div class="brick size21">TEXT here2</div>
				<div class="brick size21">TEXT here3</div>
				<div class="brick size21">TEXT here4</div>
				<div class="brick size21">TEXT here5</div>
				<div class="brick size22">TEXT here6</div>
   </div>
   <div class="size13 level1" id="statContainer">
				<div class="brick size23">TEXT 7</div>
				<div class="brick size22">TEXT 8</div>
				<div class="brick size22">TEXT 9</div>
				<div class="brick size21">TEXT 10</div>
				<div class="brick size12">TEXT 11</div>
        </div>
    
				
			</div>

CSS

.free-wall {
				margin: 15px;
        	height: 100%;
			}

JavaScript

var gutterSize = 6;
var tileSize = 160;
 var colour = [
				"rgb(142, 68, 173)",
				"rgb(243, 156, 18)",
				"rgb(135, 0, 0)",
				"rgb(211, 84, 0)",
				"rgb(0, 106, 63)",
				"rgb(192, 57, 43)",
				"rgb(39, 174, 96)",
				"rgb(41, 128, 185)"
			];

			$(".brick").each(function() {
				this.style.backgroundColor =  colour[colour.length * Math.random() << 0];
			});
 $(function() {
 			 $("#menuContainer").attr("data-nested", ".size21").attr("data-cellW", tileSize).attr("data-cellH", tileSize).attr("data-gutterX", gutterSize).attr("data-gutterY", gutterSize);
       $("#statContainer").attr("data-nested", ".size11").attr("data-cellW", tileSize).attr("data-cellH", tileSize).attr("data-gutterX", gutterSize).attr("data-gutterY", gutterSize);
       
				var wall = new Freewall("#freewall");
				wall.reset({
					selector: '.level1',
					cellW: tileSize,
					cellH: tileSize,
          fixSize:0,
          gutterX: gutterSize,
					gutterY: gutterSize,
					onResize: function() {
            wall.fitWidth();
					}
				});
				
				
			});