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构建一个大小为“维度”/“网格间隔”（此处为：）的布尔值或零的二维数组
  4. 遍历所有盒子项目
    1. 获取盒子的位置和尺寸
    2. 通过网格间隔划分
    3. true增加数组中各个值的覆盖计数（或设置为）
  5. 空格在网格中仍然有0/值。false将它们的 indizes 与网格间距相乘以获得坐标。

对于获取维度，jQuery 的width/height函数可能会有所帮助。对于职位，您需要阅读top/left样式值。当它们被编写为内联样式时，它们会更容易获得，而不是在样式表中使用 id（甚至曾经使用过的类）。

于 2012-08-01T12:10:05.320 回答
0

这可能不是您特别寻找的解决方案，但由于它与这个问题的标题相匹配，我认为可能对其他一些寻找解决方案的人有用。

假设：

  1. 容器大小为 3 x 3 个单元格
  2. 单元格大小相同
  3. 我按列号而不是行来引用单元格（首先水平定位，然后垂直定位）
  4. 您有一个对象，其中包含有关容器中占用空间的信息（我们称之为“占用”）。在我的示例中，每个最终条目都包含一个具有“width”属性的对象，该属性包含内容的水平大小（我称它们为“平铺”），但这也可能是直接分配给条目的平面整数。

示例内容：

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 回答