Question

我正在创建一个网格，我需要从一个Javascript对象数组中添加项目。

网格 <div id="grid">只是一个div容器，需要有4列和无限行（以容纳可插入网格的不同数量的对象）

网格项（也是divs）基于具有指定其列，行，宽度和宽度的属性的对象。网格内的高度。它们看起来像这样：

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

列：就像table一样，它定义项目从哪个列开始，并根据项目的x值向右展开。

行：项目所在的行。

x：列中项目的宽度。项目宽度始终小于或等于4.

y：行中项目的高度。项目高度始终小于或等于2.

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

可以使用jQuery。

Answer 1

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

制作网格的关键是简单的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数组中的每个项目对象都是这样的，因此指定了列，行，x宽度和y高度：

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

我遍历了每个项目并附加了看起来像这样的HTML，并且哇哇！

$(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)
});

如何根据具有高度，宽度，行和的对象的JSON数组将Div定位到网格中列属性

1 个答案: