在較大的矩形中擬合不同大小的矩形的算法

Question

我需要一種算法來計算最適合較大矩形中的矩形。並且較大矩形會動態更改大小。 更多細節：

我正在使用Code52 Metro UI項目： http ： //code52.org/metro.css/

我僅使用一個圖塊行，並且所有圖塊均定義了“ float：left”。 當所有圖塊的大小都相同時，這可以很好地工作。用戶可以將瀏覽器的大小調整為任意寬度，而圖塊只是彼此“下拉”。 現在，當我想要不同的圖塊大小時，問題就來了。 這打破了一切，這顯然是人們通常將Metro UI設計為固定寬度的原因。 好吧，如果可能的話，我需要進行流暢的布局。 磁貼大小預定義如下：

Single: 130px x 130px
Double Horizontal: 130px x 280px
Double Vertical: 280px x 130px
and Double Both: 280px x 280px

容器是流體，因此寬度/高度會動態變化。

我需要的是一種使瓷磚最適合的算法..因此，任何空白空間都只會位於右下角，而不會與瓷磚混合。 這里有什么數學天才有想法嗎？

Answer 1

您可能想看看jQuery Masonary 。 它旨在針對任何大小的瓷磚執行此操作。 頭版上的示例甚至完全包含您要執行的操作。