Search code examples
javascriptjquerygridster

How to Position Divs into a Grid according to a JSON Array of Objects with Height, Width, Rows & Columns Properties

I am creating a grid and I need to append items into it from an array of Javascript objects.

The grid <div id="grid"> simply a div container which needs to have 4 columns and infinite rows (to accommodate a varying quantity of objects that may be inserted into the grid).

The grid items, which will also be divs, are based on objects that have attributes specifying their columns, row, width & height within the grid. They look like this:

c: 1
r: 3
x: 1
y: 1

columns: Just like a table this defines which column the item starts at, and expands to the right according to the item's x value.

row: The row the item is on.

x: The width of item in columns. The item width is always less than or equal to 4.

y: The height of the item in rows. The item height is always less than or equal to 2.

I need to write some javascript that will order, position and append these items within the grid based on these attributes. If it helps, the json data is coming from a similar grid created with the gridster.js library.

jQuery can be used.

Solution

  • 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)
});