假設我正在開發一個應用程序，需要顯示大量不同大小和寬高比的圖像，例如Flickr照片流或Google圖像搜索。第162頁上的多個圖像的智能對齊/佈局
是否有任何現有算法/庫，幫助決定如何高大的每一行應該是多少圖片進入各行，以便有儘可能圖像之間的小縫隙，同時也不會過分調整任何圖像，將它們全部保持在相對相似的尺寸（並且不會改變縱橫比）？
理想情況下，它將是一種可插入算法，接收圖像大小列表，目標/平均行高，屏幕寬度，並返回「行分配」列表，說明哪些圖像進入哪一行，大小，以及行高是多少。
這Flickr的頁面就是我想達到一個很好的例子：
有可能已經足夠JavaScript腳本的周圍模擬天生Flickr的佈局。但是推出自己並不難。
該算法類似於包裝長條線。查看您鏈接的Flickr頁面：一行中的圖像都具有相同的高度。這些行的高度略有不同，這使得外觀不均勻，但也確保了該行在整個屏幕上延伸。
說你的父元素有一個固定的寬度，但靈活的高度適應圖像佈局。然後您可以輕鬆地列出圖像列表：
保留行列表;每一行都是圖像列表。在開始時，thie列表是空的。
爲行選擇標稱高度。這將是圖像的最小高度。確定每個圖像的實際高度和寬度並計算出標稱寬度：
w_nom = w_orig * h_nom/h_orig
對於列表中的每個圖像，發現，可容納該圖像的行，即，圖像列表中的寬度加上一個陰影寬度加上圖像的寬度必須小於父元素的寬度。如果沒有這樣的行（或者如果行列表是空的），請啓動一個新行並放置圖像。
現在每張圖片都有其行。對於每一行，爲所有圖像選擇一個縮放因子，使得所有圖像的寬度加上a（常數，即未縮放）的排水溝是父級的寬度。縮放每個圖像的寬度和高度。
現在做佈局：將圖像從上到下放置在父元素上。調整父母的身高。
這只是初稿。更雄心勃勃的佈局可以爲每一行計算一個「不良」並更加智能地分配圖像。另外，如果最後一行只有一個小圖像，會變得不合理，但如果您有很多圖像，用戶必須在看到之前進行多次滾動。我也不知道如果它的父元素調整大小時，它必須在飛行中完成，它會如何工作。
我已經在Javascript here中做了一個小模型，但它只是一個概念證明 - 例如它在IE中不起作用。代碼位於頁面源代碼中，並且不必要的複雜，因爲用javascript樣式進行操作太羅嗦。算法本身相當簡單。
這是一個相當晚的答案，但我寫了這樣的事情（有示範）： https://github.com/mendrik/diorama
它
如果有足夠的圖像來查找解決方案，它效果最佳。如果您擁有無窮無盡的圖像流，您可以根據我的代碼拍攝10張圖像並組裝矩形。要點發生在layout.ts'searchSolution'中。它需要4個參數，畫布寬度/高度，圖像縱橫比數組（寬度/高度）和以毫秒爲單位查找解決方案的上限。
希望它有幫助！