5

幅が1000pxのコンテナがあり、すべての幅が200pxのアイテムで満たされている場合。そのタイルの行/列の位置を計算するにはどうすればよいですか？

より詳細に説明するには：

ここに画像の説明を入力してください

私が知っている唯一の変数は、コンテナの幅（上記の例では1200px）、アイテムの幅（200px上）、およびアイテムのインデックス（1から始まる）です。

上記の情報だけを考えると、javascriptを使用してインデックスを入力することにより、セルの行と列を計算するにはどうすればよいですか。

たとえば、行あたりの最大アイテム数が6（アイテム幅とコンテナ幅から簡単に計算できます）の場合、アイテム番号7が行2、列1にあることを計算できる必要があります。

コンテナとアイテムの幅は必ずしも正確に割り切れない場合があるため、方程式は各行の終わりに必要な余分な空白を考慮し、htmlfloatレイアウトの場合と同様にアイテムを次の行に自然にラップする必要があります。

前もって感謝します

編集：

次の手順を実行することで、行を非常に正確に取得できました。

var itemsperrow = Math.floor(containerwidth/ itemwidth);
var column = Math.ceil(itemindex / itemsperrow )

これは、アイテムのインデックスが0ではなく1から始まる場合です。

4

2 に答える 2

11
  1. (行の幅)/(要素の幅) の床を取ることによって、1 つの行に収まる要素の数を見つけます。
  2. 行ごとの要素で指定されたインデックス番号を割ります (これは、先ほど計算したものです)。これにより、行の位置が得られます。
  3. 次に、ステップ 1 の残りの部分を取得して、列の位置を見つけます (モジュラスを使用できます)。余りに行ごとの要素数を掛けます。それがどの列にあるかになります。

例: 行ごとに 3 要素、4 番目の要素: floor(4/3) = 1 (行 1) 余り = (4%3)=1 (列の位置)

開始するインデックスに注意してください (0 か 1 か)。この例は 1 から始まります。0 から始めたい場合は、1 (インデックス番号) を引いてシフトします。

于 2013-03-19T21:28:10.500 に答える
5

このようなもの？

var cells = document.querySelectorAll('.container').children(),
    container_width = 1200,
    cell_width = 200,
    total_cols = container_width/cell_width,

    calculateCoords = function (index) {
        return coords {
            col: index%total_cols,
            row: Math.ceil(index/total_cols)
        };
    };

//EXAMPLE USAGE FOR CELL INDEX = 3;
var index_3_coords = calculateCoords(3);
console.log(index_3_coords); //{ col: 3, row: 1 }
于 2013-03-19T21:29:21.737 に答える