圖片在JavaScript

Question

打包算法我想創建圖像的列表擠滿了同樣的方式Facebook正在做的，當你在一個相冊：

所以，輸入數據是：

1. 我們的圖像與已知的width和height
2. 一個infinite列表中，我們有一個已知一個container 0和無限高度
3. 我們希望按優先列數列出的順序顯示圖像，調整它們的寬度以適應容器寬度
4. 有時圖像覆蓋一個或兩個或多個行爲逢縱向或橫向

一些ASCII場景覆蓋可能的情況：

|------------------|------------------|------------------| 
|     |     |     | 
| Normal tile | Normal tile | Normal tile | 
|     |     |     | 
|------------------|------------------|------------------| 
|          |     | 
|  Landscape tile    |     | 
|          |     | 
|------------|------------------------|------------------| 
|   |      |     | 
| Smaller | Landscape tile  | Normal tile | 
|   |      |     | 
|------------|--|------------------|--|------------------| 
|    |     |      | 
| Portrait tile | Normal tile | Larger tile  | 
|    |     |      | 
|    |------------------|---------------------| 
|    |      |     | 
|    | Larger tile  | Normal tile | 
|    |      |     | 
|---------------|---------------------|------------------| 

我想過用樹形圖的算法從D3 JS，但我不能肯定是否會給出正確的選擇，在我的問題是我不知道容器的高度。

Treemap

這是一個包裝問題。

任何幫助或想法將不勝感激！

更新

可接受的是圖像進行縮放或剪切到更好地適應的佈局。 因此，例如，如果存在用於填充行的正方形瓷磚的位置並且當前圖像是縱向圖像，則該算法可以將圖像縮放到可用寬度並將其夾到可用高度，或者以其他方式。

Answer 1

設置瓷磚的最小可接受面積和行的標準高度。

1. 通過一個顯示圖像，調整瓷磚的高度等於行高。如果您沒有下一個圖塊的位置，我們可以展開所有已完成的行，以使其寬度爲最大寬度並轉到下一行。我們也可以繼續下去，而不會擴大，因爲人像似乎是不可能的。請注意，風景瓷磚不是特例。
2. 低排。如果圖像太低而且寬度太大以適應行高和寬度，請將一個圖塊的低行設爲適合行寬的圖塊寬度。 （你已經忘記了這種情況，這使得顯示圖像始終是不可能的，而不會出現半空行）你應該把圖像放在最後一個填充行的下邊界之後（沒有擴展肖像）。如果沒有這樣的行，添加到開始。所以，你必須記住添加普通圖片的最後一個地方，以及可以添加低排的最後一個地方。
   2.1。低行的另一個可能位置是與下一個縮短行相同寬度的最後一個縮短行。 （尋找肖像）
3. 如果調整後的圖塊的面積小於最小可接受的範圍，您將創建一個人像。
   3.1。根據最小面積，我們計算縱向的高度 - 按行測量。此外，它的高度和寬度。
   3.2。由於我們無法真正跟上源碼順序，我們會將肖像放在左側。接下來的幾行，包括這一行，將會縮短。
   3.3。如果有幾張肖像，從那一行開始或繼續，則應根據其下邊框從最低到最高排序。但是，無論如何，如果我們有前一排由兩幅肖像開始，而現在我們有另一幅這樣的肖像，那麼下一行就會出現間隙。
   3.4。如果我們有差距，我們會記住它，而在將來，我們會有一張正常的照片或一張合適的照片，我們會將它插入到間隙中。差距並不複雜，請看下一點。
   3.5。如果可以拍攝大量肖像（最好認爲它是可能的），請檢查未來的圖像以獲取可能的肖像，並且如果兩行中的值超過1，請增加當前標準行高。此外，當然，將所有找到的肖像移到較高的行。之後，將標準行高降回。