Ok, after a day I was able to do this quite simply...
The key to making a grid was simple CSS positioning.
Making sure the parent container (the #grid
) was position:relative;
and all of the grid boxes used position:absolute
and top:;left:;
I was able to accurately position the items within the grid based on their JSON properties.
For each grid item
in the JSON array I received, I set their height, width, row and column by giving them preprogrammed css classes:
.item .widthx1 { width: 85px !important; }
.item .widthx2 { width: 180px !important; }
.item .heighty1 { height: 85px !important; }
.item .heighty2 { height: 180px !important; }
.item .col1 { left:10px !important; }
.item .col2 { left:105px !important; }
.item .col3 { left:200px !important; }
.item .col4 { left:295px !important; }
.item .row1 { top:10px !important; }
.item .row2 { top:105px !important; }
.item .row3 { top:200px !important; }
.item .row4 { top:295px !important; }
Note - My CSS rows go up to .row24
as I didn't anticipate any more rows than this. If you have more rows, you can always write some javascript to calculate the top
attribute by multiplying the number of rows by the height dimension of each grid object. Same goes for columns and the left
attribute. Just multiply the number columns by the width dimension of the grid object. Then you could possibly inject the top
and left
attributes into a simple style
tag on the object.
Since each item object in my JSON array looked like this, specifying columns, rows, x width and y height:
c: 1
r: 3
x: 1
y: 1
I iterated through each item and appended HTML that looks like this, and wah-lah!
$(itemsArray).each(function(index, item) {
var itemHtml = "<div class='item widthx" + item.x + " heighty" + item.y + " row" + item.r + " " + "col" + item.c + "'>" + image + "</div>"
$('#grid').append(itemHtml)
});