如何使用行和列以圆形方式表示数据

【问题标题】：How to represent data circle wise using row and column如何使用行和列以圆形方式表示数据
【发布时间】：2021-06-03 18:50:36
【问题描述】：

我厌倦了按列表示数据行，例如附加图像。

条件：

  • 当溢出列再按行表示时，在一列中表示类似旁边的数据，
  • 当下一个数据超过列 Y 轴最大值和 X 轴表示时。
  • 如果蓝色超过前一个 Y 轴值，然后是 X，然后是 Y

这里是示例代码：Codesandbox.io 或

var data = {
      game_results: [
        {
          game_number: "1",
          winner: "red"
        },
        {
          game_number: "2",
          winner: "red"
        },
        {
          game_number: "3",
          winner: "red"
        },
        {
          game_number: "4",
          winner: "red"
        },
        {
          game_number: "5",
          winner: "red"
        },
        {
          game_number: "6",
          winner: "red"
        },
        {
          game_number: "7",
          winner: "red"
        },
        {
          game_number: "8",
          winner: "red"
        },
        {
          game_number: "9",
          winner: "red"
        },
        {
          game_number: "10",
          winner: "red"
        },
        {
          game_number: "11",
          winner: "blue"
        },
        {
          game_number: "12",
          winner: "blue"
        },
        {
          game_number: "13",
          winner: "red"
        },
        {
          game_number: "14",
          winner: "red"
        },
        {
          game_number: "15",
          winner: "red"
        },
        {
          game_number: "16",
          winner: "blue"
        },
        {
          game_number: "17",
          winner: "blue"
        },
        {
          game_number: "18",
          winner: "blue"
        },
        {
          game_number: "19",
          winner: "blue"
        },
        {
          game_number: "20",
          winner: "blue"
        },
        {
          game_number: "21",
          winner: "blue"
        },
        {
          game_number: "22",
          winner: "red"
        },
        {
          game_number: "23",
          winner: "blue"
        },
        {
          game_number: "24",
          winner: "blue"
        },
        {
          game_number: "25",
          winner: "blue"
        },
        {
          game_number: "26",
          winner: "blue"
        },
        {
          game_number: "27",
          winner: "blue"
        },
        {
          game_number: "28",
          winner: "blue"
        },
        {
          game_number: "30",
          winner: "blue"
        },
        {
          game_number: "31",
          winner: "red"
        },
        {
          game_number: "32",
          winner: "red"
        },
        {
          game_number: "33",
          winner: "red"
        },
        {
          game_number: "34",
          winner: "red"
        },
        {
          game_number: "35",
          winner: "blue"
        }
      ]
    };

    var width = 50,
      height = 50;
    var overflow1 = false;

    var prevState = data.game_results[0].winner;

    var regularx = 0,
      regularY = 0,
      x2 = 0,
      y2 = 6,
      xMax = 0;

    console.log("result ", data.game_results.length);

    for (i = 1; i <= data.game_results.length || 0; i++) {
      if (!(data.game_results[i - 1].winner == prevState)) {
        prevState = data.game_results[i - 1].winner;

        regularY = 0;
        x2 += 1;
        regularx = x2;
        xMax += 1;

        if (overflow1) {
          y2 -= 1;
        }
      }

      var _top = regularY * height;
      var _left = regularx * width;

      if (regularx == 0) {
        _left = 0;
      }
      if (regularY == 0) {
        _top = 0;
      }

      if (overflow1) {
        overflow1 = false;
      }

      if (regularY == y2) {
        overflow1 = true;
        regularY = y2 - 1;
        regularx += 1;
        _top = (y2 - 1) * height;
        _left = regularx * width;
      }

      $(".box__inner").append(
        '<div class="box '+ data.game_results[i - 1].winner+'" style="top:' +
          _top +
          "px; left:" +
          _left +
          "px; background: " + 'transparent'+
          ' "></div>'
      );

      regularY += 1;
    }
*:before,
      *:after,
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      .box-outer {
        border: 1px solid #ddd;
        overflow: auto;
      }

      .box__inner {
        height: 300px;
        position: relative;
        min-width: 100%;
        background: url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMraHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjk5RkVDODhBNzg1QjExRUI5MTE0REM4RTg4NTYyQjhBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjk5RkVDODhCNzg1QjExRUI5MTE0REM4RTg4NTYyQjhBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OTlGRUM4ODg3ODVCMTFFQjkxMTREQzhFODg1NjJCOEEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OTlGRUM4ODk3ODVCMTFFQjkxMTREQzhFODg1NjJCOEEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAGBAQEBQQGBQUGCQYFBgkLCAYGCAsMCgoLCgoMEAwMDAwMDBAMDg8QDw4MExMUFBMTHBsbGxwfHx8fHx8fHx8fAQcHBw0MDRgQEBgaFREVGh8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx//wAARCAAyADIDAREAAhEBAxEB/8QAWQABAQEAAAAAAAAAAAAAAAAAAAMIAQEAAAAAAAAAAAAAAAAAAAAAEAABBAAHAQEAAAAAAAAAAAAAAQIDBNGSslNzFDQRYREBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8A0/Vq1XVYXOhYqqxqqqtT6q/E/AK9OpsR5W4AOnU2I8rcAHTqbEeVuADp1NiPK3AB06mxHlbgA6dTYjytwAU/JBxt0oBUAAAAAAEqfkg426UAqAAAAAACVPyQcbdKAVAAAAAABKn5IONulAKgAAAAAAlT8kHG3SgFQAAAAAASp+SDjbpQCoAAAAAAP//Z);
      }

      .box {
        position: absolute;
        left: 0;
        top: 0;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: #fff;
        border: 5px solid transparent;
      }
      

      .box:before,
      .box:after {
        content: '';
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 20px;
        height: 20px;
        border-radius: 50%;
        z-index: 1;
        background: #fff;
      }
      .box:before {
        width: 45px;
        height: 45px;
        background: red
      }

      .box.red:before {
        background: red;
      }
      .box.blue:before {
        background: blue;
      }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box-outer">
  <div class="box__inner">
    <!-- <div class="box"></div> -->
  </div>
</div>

【问题讨论】：

  • 对不起，我不明白你想要什么..不清楚....
  • 感谢 cmets @Frenchy，我正在尝试使用此对象数据布局附加图像
  • @Sayed 您能否将代码上传到实时编辑器，以便我们实施并与您分享。
  • @PalashKantiBachar 当然，请点击此链接：codesandbox.io/s/game-bubble-hu69j
  • @Frenchy 我已经附加了一个输出图像并添加了数据/对象，如何使用这个数据/对象创建它。

标签： javascript html jquery css arrays


【解决方案1】：

这里我已经存储了访问过的坐标并检查了显示圆的路径

var data = {
      game_results: [
        {
          game_number: "1",
          winner: "red"
        },
        {
          game_number: "2",
          winner: "red"
        },
        {
          game_number: "3",
          winner: "red"
        },
        {
          game_number: "4",
          winner: "red"
        },
        {
          game_number: "5",
          winner: "red"
        },
        {
          game_number: "6",
          winner: "red"
        },
        {
          game_number: "7",
          winner: "red"
        },
        {
          game_number: "8",
          winner: "red"
        },
        {
          game_number: "9",
          winner: "red"
        },
        {
          game_number: "10",
          winner: "red"
        },
        {
          game_number: "11",
          winner: "blue"
        },
        {
          game_number: "12",
          winner: "blue"
        },
        {
          game_number: "13",
          winner: "red"
        },
        {
          game_number: "14",
          winner: "red"
        },
        {
          game_number: "15",
          winner: "red"
        },
        {
          game_number: "16",
          winner: "blue"
        },
        {
          game_number: "17",
          winner: "blue"
        },
        {
          game_number: "18",
          winner: "blue"
        },
        {
          game_number: "19",
          winner: "blue"
        },
        {
          game_number: "20",
          winner: "blue"
        },
        {
          game_number: "21",
          winner: "blue"
        },
        {
          game_number: "22",
          winner: "red"
        },
        {
          game_number: "23",
          winner: "blue"
        },
        {
          game_number: "24",
          winner: "blue"
        },
        {
          game_number: "25",
          winner: "blue"
        },
        {
          game_number: "26",
          winner: "blue"
        },
        {
          game_number: "27",
          winner: "blue"
        },
        {
          game_number: "28",
          winner: "blue"
        },
        {
          game_number: "30",
          winner: "blue"
        },
        {
          game_number: "31",
          winner: "red"
        },
        {
          game_number: "32",
          winner: "red"
        },
        {
          game_number: "33",
          winner: "red"
        },
        {
          game_number: "34",
          winner: "red"
        },
        {
          game_number: "35",
          winner: "blue"
        }
      ]
    };

$(document).ready(async function () {
  await renderGameObject();
});

var visitedDataSet = [];
async function renderGameObject() {
  var width = 50,
    height = 50;
  var regularx = 0,
    ymax = 6;

  let _yCord = -1;
  let _xCord = 0;
  let xCordCompleted = -1;
  let previousColor = "";

  //for loop to render the element
  for (const r of data.game_results) {
    //Reset the color/state:
    if (previousColor != r.winner) {
      previousColor = r.winner;
      xCordCompleted = xCordCompleted + 1;
      _yCord = -1;
      _xCord = xCordCompleted;
    }

    //calculate that last position
    if (_yCord === ymax - 1) {
      regularx += 1;
     // _xCord = regularx;
     _xCord = _xCord+1;
      var cordinate = await checkAvailablePosition(_xCord, _yCord);
      _xCord = cordinate.xCod;
      _yCord = cordinate.yCod;
    } else {
      _yCord = _yCord + 1;
      var cordinate1 = await checkAvailablePosition(_xCord, _yCord);
      _xCord = cordinate1.xCod;
      _yCord = cordinate1.yCod;

    }

    // stored the visited coordinate
    visitedDataSet.push({ x: _xCord, y: _yCord });
    $(".box__inner").append(
      '<div class="box ' +
        r.winner +
        '" style="top:' +
        _yCord * width +
        "px; left:" +
        _xCord * height +
        "px; background: " +
        "transparent" +
        ' "></div>'
    );
  }
}

async function checkAvailablePosition(xCod, yCod) {
  let existingData =(await visitedDataSet.filter((r) => r.x === xCod && r.y === yCod)) || []; //check the cordinate is available or not
  if (existingData.length > 0) {
    if (((await visitedDataSet.filter((r) => r.x === xCod + 1 && r.y === yCod)) || []).length > 0) {        
        return { xCod: xCod + 1, yCod: yCod - 1 };
    } else {
      return { xCod: xCod + 1, yCod: yCod };
    }
  } else {
    return { xCod: xCod, yCod: yCod };
  }
}
*:before,
      *:after,
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      .box-outer {
        border: 1px solid #ddd;
        overflow: auto;
      }

      .box__inner {
        height: 300px;
        position: relative;
        min-width: 100%;
        background: url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMraHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjk5RkVDODhBNzg1QjExRUI5MTE0REM4RTg4NTYyQjhBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjk5RkVDODhCNzg1QjExRUI5MTE0REM4RTg4NTYyQjhBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OTlGRUM4ODg3ODVCMTFFQjkxMTREQzhFODg1NjJCOEEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OTlGRUM4ODk3ODVCMTFFQjkxMTREQzhFODg1NjJCOEEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAGBAQEBQQGBQUGCQYFBgkLCAYGCAsMCgoLCgoMEAwMDAwMDBAMDg8QDw4MExMUFBMTHBsbGxwfHx8fHx8fHx8fAQcHBw0MDRgQEBgaFREVGh8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx//wAARCAAyADIDAREAAhEBAxEB/8QAWQABAQEAAAAAAAAAAAAAAAAAAAMIAQEAAAAAAAAAAAAAAAAAAAAAEAABBAAHAQEAAAAAAAAAAAAAAQIDBNGSslNzFDQRYREBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8A0/Vq1XVYXOhYqqxqqqtT6q/E/AK9OpsR5W4AOnU2I8rcAHTqbEeVuADp1NiPK3AB06mxHlbgA6dTYjytwAU/JBxt0oBUAAAAAAEqfkg426UAqAAAAAACVPyQcbdKAVAAAAAABKn5IONulAKgAAAAAAlT8kHG3SgFQAAAAAASp+SDjbpQCoAAAAAAP//Z);
      }

      .box {
        position: absolute;
        left: 0;
        top: 0;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: #fff;
        border: 5px solid transparent;
      }
      

      .box:before,
      .box:after {
        content: '';
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 20px;
        height: 20px;
        border-radius: 50%;
        z-index: 1;
        background: #fff;
      }
      .box:before {
        width: 45px;
        height: 45px;
        background: red
      }

      .box.red:before {
        background: red;
      }
      .box.blue:before {
        background: blue;
      }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box-outer">
      <div class="box__inner">
        <!-- <div class="box"></div> -->
      </div>
    </div>

【讨论】：

  • @Md.AbuSayed 抱歉，但这个解决方案是错误的..没有相同的数据
  • @Frenchy 感谢 cmets，我已经更新了数据，并且工作正常。
  • 没问题，我刚刚创建了一个本地的sn-p stakoverflow
  • @PalashKantiBachar 对于随机更多数据无法正常工作
  • @Md.AbuSayed 您现在可以查看。希望它适用于所有数据。
【解决方案2】：

它不是解决方案，因为我不了解规则，但它有助于调试你有错误的地方

调试器！：

var data = {
  game_results: [{
      game_number: "1",
      winner: "red"
    },
    {
      game_number: "2",
      winner: "red"
    },
    {
      game_number: "3",
      winner: "red"
    },
    {
      game_number: "4",
      winner: "red"
    },
    {
      game_number: "5",
      winner: "red"
    },
    {
      game_number: "6",
      winner: "red"
    },
    {
      game_number: "7",
      winner: "red"
    },
    {
      game_number: "8",
      winner: "red"
    },
    {
      game_number: "9",
      winner: "red"
    },
    {
      game_number: "10",
      winner: "red"
    },
    {
      game_number: "11",
      winner: "blue"
    },
    {
      game_number: "12",
      winner: "blue"
    },
    {
      game_number: "13",
      winner: "red"
    },
    {
      game_number: "14",
      winner: "red"
    },
    {
      game_number: "15",
      winner: "red"
    },
    {
      game_number: "16",
      winner: "blue"
    },
    {
      game_number: "17",
      winner: "blue"
    },
    {
      game_number: "18",
      winner: "blue"
    },
    {
      game_number: "19",
      winner: "blue"
    },
    {
      game_number: "20",
      winner: "blue"
    },
    {
      game_number: "21",
      winner: "blue"
    },
    {
      game_number: "22",
      winner: "red"
    },
    {
      game_number: "23",
      winner: "blue"
    },
    {
      game_number: "24",
      winner: "blue"
    },
    {
      game_number: "25",
      winner: "blue"
    },
    {
      game_number: "26",
      winner: "blue"
    },
    {
      game_number: "27",
      winner: "blue"
    },
    {
      game_number: "28",
      winner: "blue"
    },   
    {
      game_number: "30",
      winner: "blue"
    },
    {
      game_number: "31",
      winner: "red"
    },
    {
      game_number: "32",
      winner: "red"
    },
    {
      game_number: "33",
      winner: "red"
    },
    {
      game_number: "34",
      winner: "red"
    },
    {
      game_number: "35",
      winner: "blue"
    }
  ]
};

var width = 50,
  height = 50;
var overflow1 = false;

var prevState = data.game_results[0].winner;

var regularx = 0,
  regularY = 0,
  x2 = 0,
  y2 = 6,
  xMax = 0;

console.log("result ", data.game_results.length);

for (i = 1; i <= data.game_results.length || 0; i++) {
  if (data.game_results[i - 1].winner != prevState) {
    prevState = data.game_results[i - 1].winner;

    regularY = 0;
    x2 += 1;
    regularx = x2;
    xMax += 1;

    if (overflow1) {
      y2 -= 1;
    }
  }

  var _top = regularY * height;
  var _left = regularx * width;

  if (regularx == 0) {
    _left = 0;
  }
  if (regularY == 0) {
    _top = 0;
  }

  if (overflow1) {
    overflow1 = false;
  }

  if (regularY == y2) {
    overflow1 = true;
    regularY = y2 - 1;
    regularx += 1;
    _top = (y2 - 1) * height;
    _left = regularx * width;
  }

  $(".box__inner").append(
    '<div class="box ' + data.game_results[i - 1].winner + '" style="top:' +
    _top +
    "px; left:" +
    _left +
    "px; background: " + 'transparent' + ' ">' + i + '</div>'
  );

  regularY += 1;
}
*:before,
*:after,
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.box-outer {
  border: 1px solid #ddd;
  overflow: auto;
}

.box__inner {
  height: 300px;
  position: relative;
  min-width: 100%;
  background: url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMraHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjk5RkVDODhBNzg1QjExRUI5MTE0REM4RTg4NTYyQjhBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjk5RkVDODhCNzg1QjExRUI5MTE0REM4RTg4NTYyQjhBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OTlGRUM4ODg3ODVCMTFFQjkxMTREQzhFODg1NjJCOEEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OTlGRUM4ODk3ODVCMTFFQjkxMTREQzhFODg1NjJCOEEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAGBAQEBQQGBQUGCQYFBgkLCAYGCAsMCgoLCgoMEAwMDAwMDBAMDg8QDw4MExMUFBMTHBsbGxwfHx8fHx8fHx8fAQcHBw0MDRgQEBgaFREVGh8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx//wAARCAAyADIDAREAAhEBAxEB/8QAWQABAQEAAAAAAAAAAAAAAAAAAAMIAQEAAAAAAAAAAAAAAAAAAAAAEAABBAAHAQEAAAAAAAAAAAAAAQIDBNGSslNzFDQRYREBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8A0/Vq1XVYXOhYqqxqqqtT6q/E/AK9OpsR5W4AOnU2I8rcAHTqbEeVuADp1NiPK3AB06mxHlbgA6dTYjytwAU/JBxt0oBUAAAAAAEqfkg426UAqAAAAAACVPyQcbdKAVAAAAAABKn5IONulAKgAAAAAAlT8kHG3SgFQAAAAAASp+SDjbpQCoAAAAAAP//Z);
}

.box {
  position: absolute;
  left: 0;
  top: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
  border: 5px solid transparent;
}

.box:before,
.box:after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  z-index: 1;
  background: #fff;
}

.box:before {
  width: 25px;
  height: 25px;
  background: red
}

.box.red:before {
  background: red;
}

.box.blue:before {
  background: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box-outer">
  <div class="box__inner">
    <!-- <div class="box"></div> -->
  </div>
</div>

解决方案！

var data = {
  game_results: [{
      game_number: "1",
      winner: "red"
    },
    {
      game_number: "2",
      winner: "red"
    },
    {
      game_number: "3",
      winner: "red"
    },
    {
      game_number: "4",
      winner: "red"
    },
    {
      game_number: "5",
      winner: "red"
    },
    {
      game_number: "6",
      winner: "red"
    },
    {
      game_number: "7",
      winner: "red"
    },
    {
      game_number: "8",
      winner: "red"
    },
    {
      game_number: "9",
      winner: "red"
    },
    {
      game_number: "10",
      winner: "red"
    },
    {
      game_number: "11",
      winner: "blue"
    },
    {
      game_number: "12",
      winner: "blue"
    },
    {
      game_number: "13",
      winner: "red"
    },
    {
      game_number: "14",
      winner: "red"
    },
    {
      game_number: "15",
      winner: "red"
    },
    {
      game_number: "16",
      winner: "blue"
    },
    {
      game_number: "17",
      winner: "blue"
    },
    {
      game_number: "18",
      winner: "blue"
    },
    {
      game_number: "19",
      winner: "blue"
    },
    {
      game_number: "20",
      winner: "blue"
    },
    {
      game_number: "21",
      winner: "blue"
    },
    {
      game_number: "22",
      winner: "red"
    },
    {
      game_number: "23",
      winner: "blue"
    },
    {
      game_number: "24",
      winner: "blue"
    },
    {
      game_number: "25",
      winner: "blue"
    },
    {
      game_number: "26",
      winner: "blue"
    },
    {
      game_number: "27",
      winner: "blue"
    },
    {
      game_number: "28",
      winner: "blue"
    },
    {
      game_number: "30",
      winner: "blue"
    },
    {
      game_number: "31",
      winner: "red"
    },
    {
      game_number: "32",
      winner: "red"
    },
    {
      game_number: "33",
      winner: "red"
    },
    {
      game_number: "34",
      winner: "red"
    },
    {
      game_number: "35",
      winner: "blue"
    }
  ]
};

var width = 50,
  height = 50;
var sameRow = -1;

var prevState = data.game_results[0].winner;

var regularX = 0,
  regularY = 0,
  yMax = 5,
  xMax = 1;

console.log("result ", data.game_results.length);

for (var i = 0; i < data.game_results.length; i++) {
  if (data.game_results[i].winner != prevState) {
    prevState = data.game_results[i].winner;
    sameRow = -1;
    regularY = 0;
    regularX = xMax++;
  }


  if (isBoxBusy(regularX, regularY)) {
    sameRow = regularY - 1;
  }


  if (sameRow >= 0) {
    regularX++;
    createBox(regularX, sameRow, width, height, data.game_results[i].winner);
    continue;
  } else {
    createBox(regularX, regularY, width, height, data.game_results[i].winner);
  }

  //if (i == 34) break;

  if (yMax != regularY) {
    regularY++;
  } else {
    regularX++;
  }
}

function isBoxBusy(x, y) {
  return $(`div.box__inner .box[data-xy="${x},${y}"]`).length;
}

function isSameColor(x, y, color) {
  return $(`div.box__inner .box[data-xy="${x},${y}"]`).hasClass(color);
}

function createBox(x, y, w, h, color, i = "") {
  $(".box__inner").append(
    `<div class="box ${color}" ` +
    `data-xy = "${x},${y}" ` +
    `style="top:${y*h}px; left:${x*w}px; background: 'transparent'" >${i}</div>`
  );
}
*:before,
*:after,
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.box-outer {
  border: 1px solid #ddd;
  overflow: auto;
}

.box__inner {
  height: 300px;
  position: relative;
  min-width: 100%;
  background: url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMraHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjk5RkVDODhBNzg1QjExRUI5MTE0REM4RTg4NTYyQjhBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjk5RkVDODhCNzg1QjExRUI5MTE0REM4RTg4NTYyQjhBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OTlGRUM4ODg3ODVCMTFFQjkxMTREQzhFODg1NjJCOEEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OTlGRUM4ODk3ODVCMTFFQjkxMTREQzhFODg1NjJCOEEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAGBAQEBQQGBQUGCQYFBgkLCAYGCAsMCgoLCgoMEAwMDAwMDBAMDg8QDw4MExMUFBMTHBsbGxwfHx8fHx8fHx8fAQcHBw0MDRgQEBgaFREVGh8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx//wAARCAAyADIDAREAAhEBAxEB/8QAWQABAQEAAAAAAAAAAAAAAAAAAAMIAQEAAAAAAAAAAAAAAAAAAAAAEAABBAAHAQEAAAAAAAAAAAAAAQIDBNGSslNzFDQRYREBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8A0/Vq1XVYXOhYqqxqqqtT6q/E/AK9OpsR5W4AOnU2I8rcAHTqbEeVuADp1NiPK3AB06mxHlbgA6dTYjytwAU/JBxt0oBUAAAAAAEqfkg426UAqAAAAAACVPyQcbdKAVAAAAAABKn5IONulAKgAAAAAAlT8kHG3SgFQAAAAAASp+SDjbpQCoAAAAAAP//Z);
}

.box {
  position: absolute;
  left: 0;
  top: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
  border: 5px solid transparent;
}

.box:before,
.box:after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  z-index: 1;
  background: #fff;
}

.box:before {
  width: 45px;
  height: 45px;
  background: red
}

.box.red:before {
  background: red;
}

.box.blue:before {
  background: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box-outer">
  <div class="box__inner">
    <!-- <div class="box"></div> -->
  </div>
</div>

【讨论】：

  • 谢谢你的回答先生，但我已经创建了它。
  • @Md.AbuSayed 我想我有解决方案，太棒了..
  • Greate @Frenchy，非常感谢。
猜你喜欢
  • 2022-10-02
  • 2012-05-02
  • 2016-01-13
  • 1970-01-01
  • 1970-01-01
  • 2011-01-16
  • 2020-12-13
  • 2012-03-24
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode