动态生成图像网格以适合预定义区域

Question

我需要创建一个instagram图像网格，并将它们放在预定义区域。例如：我有一个div 600x400px和50个方形图像（总会有偶数个图像）。我需要按行和列排列图像，以尽可能多地填充包含div的空间。

你可以看到我想要实现的目标here。这是最终结果：

这实际上是一个非常好的结果。当您更改图像数量时，事情会变得更糟，例如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。那么如何更改它以填充容器中的更多空间？

Answer 1

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

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);

在this fiddle中，更改width，height和items，您会看到始终为div方格选择最大尺寸。