類似砌體的圖片網格

Question

我一直在思考這個復雜的問題，我確信有一個簡單的答案或其他途徑可以找到解決方案。

我想要完成的是一個隨機的圖像網格。 我有一系列圖像，我想在齊平網格中排隊。 我的意思是我希望網格沒有任何空白。 以下是一些示例圖片：

主要規格：

• 容器/單元必須具有圖像可以適應的比例而不會傾斜
• 網格必須齊平。 它不能有任何空白，包括最后一行。

我遇到的問題是我無法提出或者說出一個可以創建我想要完成的表maxtrix的公式。 Masonary是我想要的99.9％，除了網格沒有考慮圖像大小也沒有結束沖洗。 因此1％是我不考慮使用它的原因。

我不是在尋找具體的javascript，因為這與數學有關，所以我計划在PHP中創建布局，然后在javascript中啟用功能。

任何幫助或指示將不勝感激。

Answer 1

您的示例圖像按行排列。 此外，您沒有關於固定總大小的任何內容，因此我假設可以隨意選擇整個布局的寬高比。 在這種情況下，你可以嘗試這些方面：

1. 通過固定的高度和以這樣的方式，可以保留寬高比選擇寬度排隊在一個單一的行中的所有圖像。
2. 將該行拆分為多行。 您可以在此處使用多種啟發式方法，根據您的喜好調整最終結果。 但任何解決方案都能滿足您的要求。
3. 以這樣的方式縮放每一行，使它們都具有相同的寬度，然后堆疊它們。

顯然這只是一個粗略的輪廓。 真正困難的部分將是如何將圖像分布到不同的行上。 一個目標可能是組合具有相似縱橫比的圖像，使得最終圖像具有相似的尺寸。 您可以針對每個比率計算將導致所需圖像區域的首選圖像高度，然后組合具有相似高度要求的圖像，直到縮放到公共高度所得的寬度與您對最終行所需的寬度相匹配。 但是其他方面也會發揮作用，例如制作類似寬度的行，以及類似的東西。

您可能會在其他答案和評論中找到有關目標的建議，並在找到您喜歡的內容之前隨意玩具。

Answer 2

Justified-Gallery看起來像是一個解決方案， 這里是帶有示例的網站 。