-1

グリッドを作成していますが、Javascript オブジェクトの配列から項目をグリッドに追加する必要があります。

グリッド は、 4 つの列と無限の行 (グリッドに挿入されるさまざまな量のオブジェクトに対応するため) を持つ必要がある<div id="grid">単純なコンテナーです。div

グリッド アイテムは、divsグリッド内の列、行、幅、高さを指定する属性を持つオブジェクトに基づいています。それらは次のようになります。

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

列:のように、これは項目が開始する列を定義し、項目の値tableに従って右に展開します。x

行: アイテムがある行。

x: 列のアイテムの幅。アイテムの幅は常に 4 以下です。

y: 項目の行の高さ。アイテムの高さは常に 2 以下です。

これらの属性に基づいて、グリッド内でこれらの項目を順序付け、配置、および追加する JavaScript を作成する必要があります。それが役立つ場合、json データは、gridster.js ライブラリで作成された同様のグリッドから取得されます。

jQueryが使えます。

4

1 に答える 1

0

わかりました、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それ以上の行がある場合はtop、行数に各グリッド オブジェクトの高さの寸法を掛けて属性を計算する JavaScript をいつでも作成できます。列と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)
});
于 2013-10-24T17:04:06.627 に答える