Javascript 计算定义数目的平方div的最大大小'；s在响应性父分区内

我想在一个容器中有一个高度和宽度可变的正方形div网格

正方形div的数量是固定的。 所有方形div都包含相同尺寸的图像（如示例中所示）。它们应该左对齐，并从一行的末尾绕到下一行。必须有一个算法来计算列数、行数及其最大大小，以便将它们全部放入父div中

有人能告诉我如何计算每个正方形在父容器中适合的最大正方形大小吗？看来我的包装有点问题

我计算图像高度的实际代码是：

var imageHeight = Math.floor((maxHeight - imageMargin) / 3);

详细代码：使用JSFiddle

var$container=$（'.container'）；
变量$square=$（'.square'）；
调整正方形（）；
函数（）{
//计算最大容器高度（例如窗户高度的一半）
$container.removeAttr（'style'）；
var maxHeight=Math.floor（$（window.height（）/2）；
$container.css({
“最大高度”：最大高度+px，
“溢出”：“隐藏”
});
//计算最大图像高度（根据方块数和最大容器高度）
var imageMargin=$square.outerWidth（true）-$square.width（）；
var imageHeight=Math.floor（（maxHeight-imageMargin）/3）；//如何计算此图像高度？
$square.find（'img'）。宽度（图像高度）；
$square.find（'img'）。高度（imageHeight）；
//计算容器宽度（以找到每行的最大正方形数并将其居中）
var maxWidth=$container.width（）；
var blockWidth=$square.outerWidth（真）；
var squaresPerRow=数学地板（最大宽度/块宽度）；
$container.width（方形箭头*块宽度）；
}
var-resizeTimeout；
$（窗口）。调整大小（函数（）{
clearTimeout（resizeTimeout）；
resizeTimeout=设置超时（调整平方，200）；
});
正文{
填充：0；
保证金：0；
}
.集装箱{
宽度：100%；
保证金：0自动；
字体大小：0；/*删除内联块空间*/
}
.广场{
显示：内联块；
保证金：5px；
}
img{
最大宽度：100%；
高度：自动；
}
您需要遍历所有
.square
元素。然后使用
$.each（）
进行设置

$(function () {
  var maxHeight = 0;
  $(".square").each(function () {
    var curHt = $(this).height();
    maxHeight = (curHt > maxHeight) ? curHt : maxHeight;
  });
  $(".square").css("height", maxHeight);
});

您需要遍历所有
.square
元素。然后使用
$.each（）
进行设置

$(function () {
  var maxHeight = 0;
  $(".square").each(function () {
    var curHt = $(this).height();
    maxHeight = (curHt > maxHeight) ? curHt : maxHeight;
  });
  $(".square").css("height", maxHeight);
});

我做到了

根据调查，我设法找到了一个可行的解决办法

我使用的算法是：

  var containerWidth = $container.width();
  var containerHeight = Math.floor($(window).height() / 2);

  $container.css({
    'max-height': containerHeight + 'px',
    'overflow': 'hidden'
  });

  // CALCULATE MAXIMUM SQUARE SIZE, according to the number of squares and the container size
  var hw = containerHeight / containerWidth;
  var wh = containerWidth / containerHeight;

  var px = Math.ceil(Math.sqrt(squareCount * hw));
  var py = Math.ceil(Math.sqrt(squareCount * wh));

  var sx;
  if (Math.floor(px * wh) * px < squareCount) {
    sx = containerWidth / Math.ceil(px * wh);
  }
  else {
    sx = containerHeight / px;
  }

  var sy;
  if (Math.floor(py * hw) * py < squareCount) {
    sy = containerHeight / Math.ceil(py * hw);
  }
  else {
    sy = containerWidth / py;
  }

  var squareDimension = Math.floor(Math.max(sx, sy) - squareMargin);
  $squares.find('img').width(squareDimension);
  $squares.find('img').height(squareDimension);

var containerWidth=$container.width（）；
var containerHeight=Math.floor（$（window.height（）/2）；
$container.css({
“最大高度”：容器高度+px，
“溢出”：“隐藏”
});
//根据方块数和容器大小计算最大方块大小
var hw=集装箱高度/集装箱宽度；
var wh=集装箱宽度/集装箱高度；
var px=Math.ceil（Math.sqrt（squareCount*hw））；
var py=Math.ceil（Math.sqrt（squareCount*wh））；
var-sx；
if（数学楼层（px*wh）*px

请参阅，以了解正在运行的更新计算算法。
我做到了

根据调查，我设法找到了一个可行的解决办法

我使用的算法是：

  var containerWidth = $container.width();
  var containerHeight = Math.floor($(window).height() / 2);

  $container.css({
    'max-height': containerHeight + 'px',
    'overflow': 'hidden'
  });

  // CALCULATE MAXIMUM SQUARE SIZE, according to the number of squares and the container size
  var hw = containerHeight / containerWidth;
  var wh = containerWidth / containerHeight;

  var px = Math.ceil(Math.sqrt(squareCount * hw));
  var py = Math.ceil(Math.sqrt(squareCount * wh));

  var sx;
  if (Math.floor(px * wh) * px < squareCount) {
    sx = containerWidth / Math.ceil(px * wh);
  }
  else {
    sx = containerHeight / px;
  }

  var sy;
  if (Math.floor(py * hw) * py < squareCount) {
    sy = containerHeight / Math.ceil(py * hw);
  }
  else {
    sy = containerWidth / py;
  }

  var squareDimension = Math.floor(Math.max(sx, sy) - squareMargin);
  $squares.find('img').width(squareDimension);
  $squares.find('img').height(squareDimension);

var containerWidth=$container.width（）；
var containerHeight=Math.floor（$（window.height（）/2）；
$container.css({
“最大高度”：容器高度+px，
“溢出”：“隐藏”
});
//根据方块数和容器大小计算最大方块大小
var hw=集装箱高度/集装箱宽度；
var wh=集装箱宽度/集装箱高度；
var px=Math.ceil（Math.sqrt（squareCount*hw））；
var py=Math.ceil（Math.sqrt（squareCount*wh））；
var-sx；
if（数学楼层（px*wh）*px

请参阅以了解更新后的计算算法。
最好在此处添加代码，因为JSFIDLE速度太慢。删除以下代码为什么要限制最大高度$css（{'max height'：maxHeight+'px'，'overflow'：'hidden'}）@surajrawat我有另一个div在它下面，下面的div应该总是可见的，没有滚动。它是可折叠的，当它折叠时，上div应该展开，下div位于可见页面的底部area@KebapBoy答案对我来说没问题。你试过了吗？@Paulie\u我忘记了我的凭证，创建了一个新帐户。现在我提醒自己，我是用facebook登录的，所以我删除了这个老问题，并用我的真实帐户再次提问。抱歉，这里最好添加代码，因为JSFIDLE太慢了。删除下面的代码为什么要限制最大高度$css（{'max height'：maxHeight+'px'，'overflow'：'hidden'}）@surajrawat我有另一个div在它下面，下面的div应该总是可见的，没有滚动。它是可折叠的，当它折叠upp时