使用可變大小縮略圖制作照片庫的最簡單方法是什么？

Question

我想創建一個類似Google+“來自你的圈子的照片”的圖庫，其中縮略圖看起來像拼貼畫。

• 縮略圖保持照片的縱橫比。
• 圖庫行的高度接近（不相等但非常接近）。
• 縮略圖之間的間距在任何地方都是相等的。
• 畫廊填充一個矩形。
• 照片未裁剪。 他們只是調整大小以填補空間。

請以屏幕截圖為例： http ： //ansonalex.com/wp-content/uploads/2011/07/google-plus-gallery-large.jpg

我想學習如何使用css / javascript / jquery以編程方式在客戶端設置這樣的圖庫縮略圖。

謝謝你的回答！

Answer 1

這是經典的切割庫存問題 。 您可以使用分支定界方法或動態編程來解決它。

一般來說，Google擁有龐大的圖片庫，因此找到合適的寬度組合對他們來說更容易。

對於你，我建議使用有限的寬高比（例如16）來創建有限數量的組合（256）。 轉換前的每張圖片都應縮放或裁剪為最接近的寬高比。

請記住，可能有非常寬的圖片需要一些解決方法：裁剪或寬度應該是行和高度變量的寬度。 間距也需要以某種方式解決。 我會將所有圖片連成一行，並將間距作為白色疊加在圖片上。

Answer 2

您可能會發現這篇文章很有用： 構建Google Plus靈感圖片庫

他使用的技術不需要對圖像進行排序，而且非常簡單。 基本上，一旦你知道你的縮略圖行的寬度W，繼續放置縮略圖直到總寬度超過W.假設你超過W 40 xx。 現在，裁剪行中的每個縮略圖（通過css）以刪除總共40個像素。

例如，如果您想從圖像中裁剪10px，可以使用以下內容執行此操作：

<div style="width:[cropped width]; height:[height]; margin-left:-5px; overflow:hidden;">
  <img style="width:[true width]; height:[height];" src="path/to/thumbnail.jpg" />
</div>

溢出：隱藏作物圖像，負邊緣基本上水平居中。

Answer 3

我將簡化我看到的內容（例如，我提供的數字不是100％，像素精確到准），但它會為您提供一種方法來實現這一目標。

當我看截圖時，我看到的是大約4x3寬高比（或反向3x4）的圖像列表。 這種寬高比是布局的核心。 填充的整個矩形可以是任何寬高比，但它應該是某些寬度和高度的倍數。 例如，您將看到每行包含一些肖像和一些風景照片。 然而，總體效果是G +可以從大量圖像中提取，因此，可以選擇滿足各個縱橫比（給定圖像的橫向或縱向）的需求的圖像組合，以及包含矩形的整體寬高比。

我會拍攝池中可用的圖像，並計算它們的寬高比（簡單寬度除以高度）。 然后按圖像寬高比對圖像進行分組。

最后，關於布局的一個棘手的部分是你必須弄清楚哪種寬高比組合將產生一個從左到右完全填滿的行。 從截圖中我們看到三個這樣的例子：

1. 第1行= 4張風景照片
2. 第2行= 2張風景照片，2張肖像照片和1張方形照片
3. 第3行= 3張風景照片，1張肖像照片和1張方形照片

結果是，由於所有縮略圖都具有相同的高度，因此它們在這些特定組合中的組合寬度為您提供了布局矩形所需的最終寬度。

所以，我認為解決這個特殊問題基本上是解決4個子問題：

1. 計算可用“照片池”中所有照片的寬高比
2. 列出所有照片寬高比的組合，以產生所需的寬度（制作單行）
3. 從可用的照片池中，找出哪些照片可以組合成哪些有效組合，從而產生一組合成的圖像
4. 最后，步驟1-3創建單行圖像。 為了獲得整個矩形，您只需使用步驟1-3創建任意數量的圖像行，然后將它們全部疊加在一起。