Question

如何使用Javascript在容器中获取空（例如白色）区域？是否有一个现成的jQuery函数或类似的东西？

screen

我需要Javascript中“空白”区域的宽度，高度，左侧和顶部位置。

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;    
}

TIA frgtv10

Answer 1

在您的情况下，这很容易：您知道布局，取{A}的left值和其他元素的top值 - 100 x 200px。

对于具有未知空间和未知元素位置的更通用解决方案，您只能在容器上应用网格/表格。

获取#container
选择网格间距（在您的情况下为100px，以获取未知布局中的所有空间使用1px）
构建一个大小为“dimension”/“grid interval”（此处为3x3）的布尔值或零的二维数组
循环遍历所有框项目
1. 获取方框的位置和尺寸
2. 除以网格间隔
3. 增加数组
空格在网格中仍有0 / false值。将它们的indize与网格间距相乘得到坐标。

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

Answer 2

这可能并不是您正在寻找的确切解决方案，但由于它与该问题的标题相匹配，因此我认为对于其他寻求解决方案的人可能会有用。

假设：

容器的大小为3 x 3个单元格
像元大小相同
我用列号而不是行来指代单元格（首先水平放置，然后垂直放置）
您有一个对象，该对象包含有关容器中占用空间的信息（我们称其为“占用率”）。在我的示例中，每个最终条目都包含一个对象，该对象具有“ width”属性，该属性保持内容的水平大小（我称它们为“ tile”），但这也可以是直接分配给该条目的平坦整数。

示例内容：

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实现，该实现读取框架数据，因此不需要参数。

获取容器中的空白区域

2 个答案: