-1

我正在创建一个网格，我需要从一组 Javascript 对象中将项目附加到其中。

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

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

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

columns:就像table这样定义项目从哪一列开始，并根据项目的x值向右扩展。

row： 项目所在的行。

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

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

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

可以使用 jQuery。

4

1 回答 1

0

好的，一天后我可以很简单地做到这一点......

制作网格的关键是简单的 CSS 定位。

确保父容器 ( #grid)position:relative;和所有使用的网格框position:absolute，并且top:;left:;我能够根据它们的 JSON 属性准确地定位网格中的项目。

item对于我收到的 JSON 数组中的每个网格，我通过为它们提供预编程的 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属性也是如此。只需将数字列乘以网格对象的宽度尺寸即可。然后，您可以将topandleft属性注入到对象上的一个简单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)
});
于 2013-10-24T17:04:06.627 回答