Javascript HTML5/CSS回流网格布局

我一直在寻找一种方法来实现这一点有一段时间了，但我还没有遇到任何东西。我想要的是能够在网格布局中显示一系列图片，从左到右再上下排列。我希望它在每一行上占据尽可能多的可用空间（同时遵守某些条件，如图像之间的填充），当窗口重新调整大小时，它将自动重新计算图像应放置的位置

我将以下图表放在一起，以帮助我实现目标：

在CSS、HTML5和/或JavaScript中有什么简单的方法可以做到这一点吗

谢谢， Josh.

简单的方法：

---

这是一个JSFIDLE

使用百分比。尝试以下方法：

#outer{
  height:400px; width:400px;
}
#outer img{
  width:30%; border:0; margin:2%; float:left;
}
#outer #bd{
  clear:left;
}

您的HTML可以包括：

<div id='outer'>
  <img src='whatever1.png' alt='whatever1' />
  <img src='whatever2.png' alt='whatever2' />
  <img src='whatever3.png' alt='whatever3' />
  <img src='whatever4.png' alt='whatever4' />
  <img src='whatever5.png' alt='whatever5' />
  <img src='whatever6.png' alt='whatever6' />
  <img src='whatever7.png' alt='whatever7' />
  <img src='whatever8.png' alt='whatever8' />
  <img src='whatever9.png' alt='whatever9' />
  <img src='whatever10.png' alt='whatever10' />
  <img src='whatever11.png' alt='whatever11' />
  <img src='whatever12.png' alt='whatever12' />
  <div id='bd'></div>
</div>

---

根据需要调整边距。这是2%的折扣，因为3个30%的IMG将占90%，然后做利润重叠，应该是4个利润率为2%，所以8%的总利润率为98%。您可能希望使用20%的宽度，4%的边距，4%的宽度和100%。

这不考虑图像大小，也不考虑容器末端有奇怪的空间。

<div id='outer'>
  <img src='whatever1.png' alt='whatever1' />
  <img src='whatever2.png' alt='whatever2' />
  <img src='whatever3.png' alt='whatever3' />
  <img src='whatever4.png' alt='whatever4' />
  <img src='whatever5.png' alt='whatever5' />
  <img src='whatever6.png' alt='whatever6' />
  <img src='whatever7.png' alt='whatever7' />
  <img src='whatever8.png' alt='whatever8' />
  <img src='whatever9.png' alt='whatever9' />
  <img src='whatever10.png' alt='whatever10' />
  <img src='whatever11.png' alt='whatever11' />
  <img src='whatever12.png' alt='whatever12' />
  <div id='bd'></div>
</div>