堆棧內存溢出
  簡體   English   中英

用CSS在HTML中創建網格的最有效方法？

[英]Most efficient way of creating a grid in HTML with CSS?

 原文  2014-05-02 15:08:39  2   1    javascript/ jquery/ html/ css/ css3

問題描述

我需要創建一個網格，在每個單元格中應該有一個0或1。單擊時，這些單元格應該在0和1之間切換。懸停時，它應該顯示坐標（例如1,5）。

現在，讓我工作的唯一方法是創建三個div。 一個用於單元格（包含數字），一個用於坐標（動態添加該坐標），另一個用於div（包裝），該div將位於其他兩個頂部，並且該div將具有事件偵聽器。

因此，我要為單元格創建三個div，現在，如果它用於10x10網格，則可以完美地工作，但是當它變得更大時（64x64），瀏覽器將開始凍結。

這是HTML查找網格單元格的方式： 

<div class="cell cellUnselected" id="cell_1_1" style="left: 0px; top: 0px;">0</div>
<div class="cellCoordinates cellCoordText" id="cell_1_1_coord" style="left: 0px; top: 0px;"></div>
<div class="cellWrapper" id="cell_1_1_wrapper" style="left: 0px; top: 0px;"></div>

我創建了一個有效的提琴： http : //jsfiddle.net/vicgonzalez25/Tfs2M/

問題：一旦通過創建這三個div開始使網格變得更大（例如64x64），瀏覽器就會開始凍結。 有沒有更有效的方法來進行此網格處理？

網格HTML： 

<div id="grid" class="gridContainer">
    <div class="cell cellUnselected" id="cell_1_1" style="left: 0px; top: 0px;">0</div>
    <div class="cellCoordinates cellCoordText" id="cell_1_1_coord" style="left: 0px; top: 0px;"></div>
    <div class="cellWrapper" id="cell_1_1_wrapper" style="left: 0px; top: 0px;"></div>
    <div class="cell cellUnselected" id="cell_1_2" style="left: 36px; top: 0px;">0</div>
    <div class="cellCoordinates cellCoordText" id="cell_1_2_coord" style="left: 36px; top: 0px;"></div>
    <div class="cellWrapper" id="cell_1_2_wrapper" style="left: 36px; top: 0px;"></div>
</div>

為了重現：

HTML： 

<div id="gridLayout" class="gridLayout">
    <div id="gridHeader">
        <h2>Aperture Configuration:</h2>
        Grid Size:
        <input id="rows" type="number" min="1" max="50" value="10" width="40" size="3" onChange="GRASP.start();">
        x
        <input id="cols" type="number" min="1" max="50" value="10" width="40" size="3" onChange="GRASP.start();">
    </div>
    <div id="grid" class="gridContainer"></div>

    <div id="matrixHeader" style="position:absolute">
        <h2>Auto Correlation:</h2>
    </div>
    <div id="matrix" class="autocorrMatrixContainer"></div>
</div>

Javascript： 

(function(GRASP, $){
    var GRID_ROWS,
        GRID_COLS,
        GRID_ELEMENT,
        MATRIX_ROWS,
        MATRIX_COLS,
        MATRIXHEADER_ELEMENT,
        MATRIX_ELEMENT,
        A,C;

    GRASP.config = {
        gridContainer: "grid",
        matrixContainer: "matrix",
        matrixHeader: "matrixHeader"
    };

    GRASP.start = function(){
        GRID_ROWS = $("#rows").val();
        GRID_COLS = $("#cols").val();
        MATRIX_ROWS = GRID_ROWS * 2 - 1;
        MATRIX_COLS = GRID_COLS * 2 - 1;
        createGrid();
        createAutocorrelationMatrix();
    };

    function createGrid()
    {
        GRID_ELEMENT = $("#"+GRASP.config.gridContainer);
        GRID_ELEMENT.html(""); // Clear Grid ;)
        var coord;
        var cell; // Contains the 1 or 0 based upon the cell selection

        for(var i=1; i<=GRID_ROWS; i++){
            for(var j=1; j<=GRID_COLS; j++){
                coord = "" + i + "," + j;

                $(document.createElement("div"))
                    .addClass("cellWrapper")
                    .attr("alt", coord)
                    .css("left", parseInt((j-1) * 36, 10) + "px")
                    .css("top", parseInt((i-1) * 36, 10) + "px")
                    .width(36).height(36)
                    .data("row", i).data("col", j)
                    .appendTo("#"+GRASP.config.gridContainer)
                    .on("click", cellClick)
                    .on("mouseenter", {isMatrix: false}, cellMouseEnter)
                    .on("mouseleave", cellMouseLeave);

                $(document.createElement("div"))
                    .addClass("cell cellUnselected")
                    .attr("alt", coord)
                    .css("left", parseInt((j-1) * 36, 10) + "px")
                    .css("top", parseInt((i-1) * 36, 10) + "px")
                    .text("0")
                    .appendTo("#"+GRASP.config.gridContainer);
            }
        }

        GRID_ELEMENT.height(36 * GRID_ROWS);
        GRID_ELEMENT.width(36 * GRID_COLS);

    }

    function createAutocorrelationMatrix() {
        MATRIXHEADER_ELEMENT = $("#" + GRASP.config.matrixHeader);
        MATRIX_ELEMENT = $("#" + GRASP.config.matrixContainer);
        MATRIX_ELEMENT.html("");

        MATRIXHEADER_ELEMENT.css("top", parseInt(GRID_ELEMENT.offset().top + (GRID_ROWS * 36)) + "px");
        MATRIX_ELEMENT.css("top", parseInt(MATRIXHEADER_ELEMENT.offset().top + MATRIXHEADER_ELEMENT.height()) + "px");

        var cellSize = Math.ceil((GRID_ROWS * 36) / MATRIX_ROWS);
        var coord;

        for (var i=1;i<=MATRIX_ROWS;i++){
            for (var j=1;j<=MATRIX_COLS;j++){
                coord = "" + i + "," + j;
                $(document.createElement("div"))
                    .addClass("autocorrMatrixCellWrapper")
                    .attr("alt", coord)
                    .css("left", parseInt((j-1) * cellSize, 10) + "px")
                    .css("top", parseInt((i-1) * cellSize, 10) + "px")
                    .data("row", i).data("col", j)
                    .appendTo("#"+GRASP.config.matrixContainer)
                    .on("mouseenter", {isMatrix: true}, cellMouseEnter)
                    .on("mouseleave", cellMouseLeave);

                $(document.createElement("div"))
                    .addClass("autocorrMatrixCell autocorrMatrixCellUnselected")
                    .attr("alt", coord)
                    .css("left", parseInt((j-1) * cellSize, 10) + "px")
                    .css("top", parseInt((i-1) * cellSize, 10) + "px")
                    .appendTo("#"+GRASP.config.matrixContainer);
            }
        }

        MATRIX_ELEMENT.height(36 * GRID_ROWS);
        MATRIX_ELEMENT.width(36 * GRID_COLS);
    }

    function cellClick(){
        var cell = $(this).next();

        if(cell.text() == "0"){
            cell.text("1");
        } else {
            cell.text("0");
        }
    }

    function cellMouseEnter(e){
        var i = $(this).data("row");
        var j = $(this).data("col");

        var x = e.data.isMatrix ? Math.ceil((GRID_ROWS * 36) / MATRIX_ROWS) : 36;

        var div = $(document.createElement("div"))
            .addClass("cellCoordinates cellCoordText")
            .css("left", parseInt((j-1) * x, 10) + "px")
            .css("top", parseInt((i-1) * x, 10) + "px")
            .text(i + ", " + j);

        $(this).before(div);
    }

    function cellMouseLeave(){
        $(this).prev().remove();
    }

}(window.GRASP = window.GRASP || {}, jQuery));

$(document).ready(function(){
    GRASP.start();
});

CSS： 

.gridContainer {
/*  width: inherit; */
/*  float: left; */
    position: relative;
    top: 10px;
    padding: 0 0 0 0;
    display: block;
    background: none;
    font-family: Arial, Helvetica, Verdana, sans-serif;
}

.cell {
    width: 36px;
    height: 36px;
    position: absolute;
    z-index: 0;

/*
    font-size: 16pt;
*/
    font-size: x-large;
    font-weight: normal;
    font-style: normal;
    color: #888888;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    line-height: 2em;
/*  padding-top: 0.25em; */
}

.cellSelected {
    background: #00CCFF;
}

.cellUnselected {
    background: none;
}

.cellCoordinates {
    width: 36px;
    height: 36px;
    position: absolute;
    background: none;
    z-index: 1;
}
.autocorrMatrixContainer {
    position: absolute;
/*    float: left; */
/*    bottom: 0px; */
    display: block;
    background: none;
    font-family: Arial, Helvetica, Verdana, sans-serif;
}

.autocorrMatrixCell {
    width: 16px;
    height: 16px;
    position: absolute;
    z-index: 0;
    font-size: xx-small;
    font-weight: normal;
    font-style: normal;
    color: #FFFFFF;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    line-height: 2em;
/*  padding-top: 0.25em; */
}

.autocorrMatrixCellWrapper {
    width: 16px;
    height: 16px;
    position: absolute;
    background: none;
    z-index: 2;
    border-style: solid outset;
    border-width: 1px;
    border-color: black;
    font-size: x-small;
}

.autocorrMatrixCellCoordText {
    font-size: xx-small;
    font-weight: normal;
    font-style: normal;
    padding-top: 2px;
    padding-left: 3px;
    color: #444444;
    text-align: left;
    vertical-align: top;
}
.cellWrapper {
    width: 36px;
    height: 36px;
    position: absolute;
    background: none;
    z-index: 2;
    border-style: solid outset;
    border-width: 1px;
    border-color: black;
    font-size: normal;
}

.cellCoordText {
    font-size: x-small;
    font-weight: normal;
    font-style: normal;
    padding-top: 2px;
    padding-left: 3px;
    color: #444444;
    text-align: left;
    vertical-align: top;
}

1 個解決方案

解決方案1
 0  2014-05-02 15:43:16

您正在執行以下操作：

  • 每個單元格創建三個divs ，
  • 每個div創建三個處理程序（ onclick ， onmouseenter / onmouceleave ）。 這給瀏覽器帶來了很多負擔。

您可以通過執行以下操作來大大降低負載：

  1. 每個單元格創建兩個divs ：一個帶有坐標（默認情況下是隱藏的），第二個帶有值；
  2. 不是為每個div而是為整個表附加事件處理程序;
  3. 事件處理程序應該依賴event.target它將包含值，並且其鄰居將包含坐標；
  4. 事件處理程序應執行您在代碼中實際執行的操作，但適用於目標div。

需要處理的一點是：每個特定的div都沒有onmouseleave ； 您應該在event.target更改之后運行諸如leave(prevDiv) （考慮到將prevDiv存儲在事件處理程序的末尾）。

重構好運！

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 用html / js創建可點擊網格的最有效方法是什么？ 存儲圖像的最有效方法是什么？ HTML / CSS / JS 創建 HTML 元素並為其附加屬性然后將其包裝在另一個元素中的最有效方法是什么？ 確定HTML元素是否在視口中的最有效方法？ 過濾HTML表格的最有效方法？ 在 Canvas 中創建網格是否有更有效的方法？ 為我的頁面創建網格外觀的最有效方法 在 JSON 中創建一系列超時的最有效方法是什么？ 從JavaScript即時修改單個CSS屬性的最有效方法 創建此javascript和CSS重項目的最有效方法是什么？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM