Question

我正在尝试制作一个非固定平方数的网格（5000-6000）。每个盒子的高度至少应为4x4px，间距为1px。网格应该使用整个页面，因此您不必滚动。每个元素都应尽可能大，以减少空白。列数或行数应动态选择。如果页面尺寸有所变化，正方形也会随之变化并尝试填充页面。

目前，我有以下代码。问题是每个正方形的大小都是固定的。如何缩放每个正方形，所以页面已满？最后，页面看起来应该像this picture。

var html = "";
for(i=0; i < 5000; i++){
  html += `<div class="box"></div>`;
}
document.getElementById("grid").innerHTML += html;

.wrapper {
  max-width: 100%;
  max-height: 100%;
  display: grid;
  grid-gap: 1px;
  grid-template-columns: repeat(auto-fill, minmax(4px, 1fr));
  grid-auto-rows: 4px;
  grid-auto-flow: row;
}	

.box{
  width: 100%;
  height: 100%;
  float: left;
  background: #4679BD;
}
.box:before {
  content: "";
  display: block;
  padding-top: 50%;
}

<body>
  <div id="grid" class="wrapper"></div>
</body>

Answer 1

我的想法是计算屏幕面积并将其划分为所需的框。然后用flex排列所有盒子。

我还添加了一个计算，如果最后一行不满，则减少了箱子的数量。

请注意，我在每个框的底部和右侧仅添加了1像素的边距。如果您想要更大的保证金，则在计算时必须考虑到这一点。

function showSquares() {
  var html = "";
  var screenWidth = $(window).width();
  var screenHeight = $(window).height();
  var boxesNumber = 5000;
  var marginSize = 1;
  var minSize = 4;

  var minBoxTotalArea = Math.pow((2 * marginSize) + minSize);
  var screenArea = screenWidth * screenHeight;
  var boxSize = "";

  if (screenArea / minBoxTotalArea > boxesNumber) {
    boxesNumber = screenArea / boxTotalArea;
    boxSize = 4;
  } else {
    boxSize = Math.floor(Math.sqrt(screenArea / boxesNumber)) - marginSize;
  }

  /* remove the last line if it's not full */
  var lineLength = Math.floor(screenWidth / (boxSize + marginSize));
  boxesNumber -= boxesNumber % lineLength;

  for (i = 0; i < boxesNumber; i++) {
    html += '<div class="box"></div>';
  }

  document.getElementById("grid").innerHTML = html;

  $(".box").css("width", boxSize + "px");
  $(".box").css("height", boxSize + "px");
}

$(window).on("resize load", function() {
  showSquares();
});

html,
body {
  padding: 0;
  margin: 0;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.box {
  margin-right: 1px;
  margin-bottom: 1px;
  box-sizing: border-box;
  border: 2px solid #454545;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="grid" class="wrapper"></div>
</body>

一页中不固定平方数的CSS大网格

1 个答案: