Tiled Boxes

by achudars

HTML

<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div...

CSS

.container{
            width:800px;
            overflow:hidden;
            border:1px solid #555555;
            position:relative;
            }
        .box{
            position:absolute;
            top:0;
            left:0;
            float: left;
            border:1px solid #FFFFFF;
            }
        .box.full{
            width:198px;
            height:98px;
            background-color:#444444;
            }
        .box.grid{
            position:relative;
            float:left;
            width:200px;
            height:100px;
            border:0;
            }
        .box.half{
            width:98px;
            height:48px;
            background-color:green;
            }
        .box.quarter{
            width:48px;
            height:23px;
            background-color:#DDDDDD;
            }

JavaScript

var boxes = jQuery('.box');
            var FULL = {'height':100,'width':200};
            var HALF = {'height':50,'width':100};
            var QUARTER = {'height':25,'width':50};
            var sizes = ['quarter','half','full'];
            var vacancy = [[1 ,1 ,1 ,1 ],[1 ,1 ,1 ,1],[1 ,1 ,1 ,1],[1 ,1 ,1 ,1]];
            for(var i=0; i < boxes.length; i++){
                if($('.grid.box.vacant').size() < 1){
                    var gridBox = $('<div class="grid box vacant"/>');
                    $('.container').append(gridBox);
                    vacancy = [[1 ,1 ,1 ,1 ],[1 ,1 ,1 ,1],[1 ,1 ,1 ,1],[1 ,1 ,1 ,1]];
                    }
                var className;
                var reduceChoice=0;
                do{
                className = sizes[Math.floor(Math.random() * (sizes.length - reduceChoice) )];
                var myPoint = findFreeGrid(vacancy,className);   
                reduceChoice++;
                }while(!myPoint);
                markFill(vacancy,className,myPoint);
                jQuery(boxes[i]).addClass(className).css({'top':myPoint[1]*QUARTER.height,'left':myPoint[0]*QUARTER.width});
                $('.grid.box.vacant').append(boxes[i]);     
                if(noFreeGrid(vacancy)){
                    $('.grid.box.vacant').removeClass('vacant');
                    }
                }
            function noFreeGrid(vacancy){
                var nofree = true;
                for(var i=0;i<vacancy.length;i++)
                        for(var j=0;j<vacancy[0].length;j++)
                            if(vacancy[i][j] == 1) nofree = false;
                    return nofree;
                }
            function findFreeGrid(vacancy,className){
                for(var r=0; r < 4; r++)
                    for(var c=0 ; c < 4; c++){
                        myPoint = [r, c];
                        if(checkFit(vacancy,className,myPoint))return myPoint;
                        }
                    return false;
                }
...