如何根据具有高度，宽度，行和列的对象的JSON数组将div划分到网格中

-1

我正在创建一个网格，我需要从Javascript对象数组中追加项目。如何根据具有高度，宽度，行和列的对象的JSON数组将div划分到网格中

网格<div id="grid">只是一个div容器，其需要具有4列和无限行（以容纳可以被插入到网格对象的变化量）。

网格物品，这也将是divs，是基于具有属性网格内指定它们的列，行，宽度&高度对象。他们是这样的：

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

列：就像一个table这样定义的项目开始于哪一列，并根据项目的x值扩展到右边。

row：该项目所在的行。

x：列中项目的宽度。物品宽度总是小于或等于4.

y：物品的行高。该项目的高度总是小于或等于2.

我需要编写一些JavaScript，将基于这些属性在网格中排序，定位和追加这些项目。如果有帮助，json数据来自与gridster.js库创建的类似网格。

jQuery可以使用。

来源

2013-10-22 ac360

不错的插件:)你是否试图做与serialize方法相反的？ – leaf

wared - 除了数据已经从serialize方法产生的内容修改以外，几乎没有什么变化，这会进入一个可嵌入的小部件，它将无法访问gridster.js库，因为它将被加载到其他人的网站上。 – ac360

好的，所以需要做很多事情;）我很抱歉，您至少应该为我们提供所需的HTML/CSS结构并尝试使用Javascript。如果您需要支持，您可以使用http://jsfiddle.net/来分享正在进行的工作。 – leaf

好了，过了一天，我能够做到这一点很简单...

的钥匙，使一格是简单的CSS的定位。

确保父容器（该#grid）为position:relative;和所有的网箱使用position:absolute和top:;left:;我可以根据自己的JSON属性网格内的精确定位的项目。

对于JSON数组我收到了每个网格item，我把他们的高度，宽度，行和列，让他们预先编程的CSS类：

.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; }

注 - 我的CSS行上去.row24为我没有预料到任何更多的行。如果行数更多，则可以通过编写一些javascript来计算top属性，方法是将行数乘以每个网格对象的高度尺寸。同样适用于列和left属性。只需将数字列乘以网格对象的宽度尺寸即可。然后，您可以将top和left属性注入对象上的简单style标记。

由于我的JSON阵列的每个项目对象看起来像这样，指定列，行×宽度和y高度：

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

我通过每个项目迭代和所附HTML看起来像这样，和华-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) 
});

来源

2013-10-24 17:04:06 ac360

如何根据具有高度，宽度，行和列的对象的JSON数组将div划分到网格中

回答

相关问题