Javascript 动态生成符合预定义区域的图像网格

我需要创建一个instagram图像网格，并将它们放在预定义的区域中。例如：我有一个

div

的

600x400px

和50个方形图像（图像总是偶数）。我需要将图像按行和列排列，以尽可能多地填充包含

div

的空间

你可以看到我正在努力实现的一小部分。这就是最终结果：

这其实是一个很好的结果。当你把图片的数量改为44张时，事情会变得更不正常

这是我计算网格行和列的方式：

//container size:
var width = 600;
var height = 400;
var items = 44;
var rows;
var cols;

var rows = Math.floor(Math.sqrt(items));    

while (items % rows != 0) {
    rows = rows - 1
}

cols = (items / rows);

if (rows > cols) { //make it landscape
    //swap values
    rows = [cols, cols = rows][0];
}

---

例如，44幅图像的输出是4行11列。4行的合并高度为232px，比400px小很多。那么我该如何改变它来填充容器中的更多空间呢

由于包装的原因，数学有点复杂。另一种方法是构建没有任何维度的图像字符串，然后迭代地增长它们，直到它们溢出容器

var width = 400,
    height = 300,
    items = 44,
    grid_str = '',
    $grid = $('#grid'),
    i;

function dimensions(x) {
  $('#grid div').css({
    width: x,
    height: x
  });
};

$grid.width(width).height(height);

for(i = 0 ; i < items ; i++) {
  grid_str+= '<div class="col"></div>';
}

$grid.html(grid_str);

for(i = 1 ; i < 1000 ; i++) {
  dimensions(i);
  if($grid[0].scrollHeight > $grid.height()) {
    break;
  }
}
dimensions(i-1);

var宽度=400，
高度=300，
项目=44，
网格长度=“”，
$grid=$（“#grid”），
我
功能尺寸（x）{
$（'#grid div'）.css({
宽度：x，
身高：x
});
};
$grid.宽度（宽度）.高度（高度）；
对于（i=0；i$grid.height（））{
打破
}
}
尺寸（i-1）；

在中，更改

宽度

、

高度

和

项目

，您将看到始终为

div

正方形选择最大大小