1

Javascriptを使用してコンテナ内の空の(たとえば白の)領域を取得するにはどうすればよいですか? 準備ができているjQuery関数または同等のものはありますか?

画面

Javascriptの「空の」白い領域の幅、高さ、左、および上の位置が必要です。

http://jsfiddle.net/P4QHj/

HTML

<div id="container">
  <div class="box-item a">A</div>
  <div class="box-item d">D</div>
  <div class="box-item e">E</div>
  <div class="box-item f">F</div>
</div>​

CSS

.box-item {
 width: 100px;
 height: 100px;
 background-color: grey;
 display:block;
 position:absolute;
}

#container {
 position:relative;
 width:300px;
 height:300px;
 min-width:300px;
 max-width:300px;
}

.a {
 position:relative;
 left:100px;
 width:200px;
 height:200px;
}

.d {
 left:0px;
 top: 200px;    
}
.e {
 left:100px;
 top: 200px;    
}
.f {
 left:200px;
 top: 200px;    
}

</p>

TIA frgtv10

4

2 に答える 2

2

あなたの場合は簡単です。レイアウトを知っていて、left「A」のtop値と他の要素の値を取ります - 100 x 200px。

不明な空間と不明な要素の位置を使用するより一般的なソリューションの場合、コンテナーにグリッド/テーブルのみを適用できます。

  1. あなたの寸法を取得します#container
  2. グリッド間隔を選択します (あなたの場合: 100px、未知のレイアウトですべてのスペースを取得するには 1px を使用します)
  3. 3x3ブール値またはゼロのサイズ「次元」/「グリッド間隔」(ここでは: ) の 2 次元配列を作成します。
  4. すべてのボックスアイテムをループします
    1. ボックスの位置と寸法を取得する
    2. 格子間隔で割る
    3. true配列内のそれぞれの値のカバレッジ カウントを増やす (または に設定する)
  5. グリッド内のスペースにはまだ0/値があります。falseそれらのインデックスにグリッド間隔を掛けて座標を取得します。

ディメンションを取得するには、jQuery のwidth/height関数が役立ちます。top位置については、 /leftスタイルの値を読み取る必要があります。スタイルシートでID（または一度使用されたクラスでさえ）ではなく、インラインスタイルとして記述された場合、それらははるかに簡単に取得できます。

于 2012-08-01T12:10:05.320 に答える
0

これはあなたが特に探している解決策ではないかもしれませんが、この質問のタイトルと一致するため、解決策を探している他の人にとっては役立つと思います.

仮定:

  1. コンテナのサイズは 3 x 3 セル
  2. 細胞の大きさは同じ
  3. 行よりも列番号でセルを参照します（最初に水平に配置し、次に垂直に配置します）
  4. コンテナ内の占有スペースに関する情報を含むオブジェクトがあります（「占有」と呼びましょう）。私の例では、各最終エントリはコンテンツの水平サイズを保持する「幅」プロパティを持つオブジェクトを保持します (私はそれらを「タイル」と呼びます) が、これはエントリに直接割り当てられたフラットな整数である可能性もあります。

コンテンツの例:

occupancy[0][1] = {width: 1};
occupancy[1][0] = {width: 1};
occupancy[1][1] = {width: 2};
occupancy[2][2] = {width: 1};

したがって、占有率は次のようになります (「x」は占有を意味します)。

| - | x | - |
| x | x | x |
| - | - | x |

実装：

const COLUMNS_COUNT = 3;
const MAX_ROWS = 3;
const tilesGroupedByRowColumn = {
    '0': {'1': {width: 1}},
    '1': {'0': {width: 1}},
    '1': {'1': {width: 2}},
    '2': {'2': {width: 1}},
}

let getTileOccupancyAreasMatrix = function () {

    let tileOccupancyAreasMatrix = {};

    for (let row = 0; row < MAX_ROWS; row++) {
        for (let column = 0; column < COLUMNS_COUNT; column++) {
            if (typeof tileOccupancyAreasMatrix[row] === 'undefined') {
                tileOccupancyAreasMatrix[row] = {};
            }

            if (tileOccupancyAreasMatrix[row][column] === 1) {
                // columns have been marked used by some previous iteration,
                // that was handling tiles extending to more than 1 column width
                continue;
            }

            if (typeof tilesGroupedByRowColumn[row] === 'undefined'
                || typeof tilesGroupedByRowColumn[row][column] === 'undefined') {
                tileOccupancyAreasMatrix[row][column] = 0;
                continue;
            }

            let tileWidth = tilesGroupedByRowColumn[row][column].width;
            let tileHeight = tilesGroupedByRowColumn[row][column].height;
            // code below also handles the case when tile extends to next rows and column(s)
            for (let rowNumber = row; rowNumber < row + tileHeight; rowNumber++) {
                if (typeof tileOccupancyAreasMatrix[rowNumber] === 'undefined') {
                    tileOccupancyAreasMatrix[rowNumber] = {};
                }
                for (let columnNumber = column; columnNumber < column + tileWidth; columnNumber++) {
                    tileOccupancyAreasMatrix[rowNumber][columnNumber] = 1;
                }
            }
        }
    }

    return tileOccupancyAreasMatrix;
},

ソリューションは、どのサイズのコンテナーでも機能するはずです。例を簡単にするために、3x3 の例を示しました。

最終的な解決策は、おそらく事前定義された定数に依存するよりもパラメーターを受け入れる必要があります-私の例は、フレームワークデータを読み取る Vue 実装からのものであるため、パラメーターは必要ありませんでした。

于 2019-09-24T09:19:17.093 に答える