訂購最高效佈局的砌體項目

Question

我正在使用jquery-isotope在我正在處理的網站上創建博客文章的砌體佈局。佈局是兩列，並且有兩種文章類型 - 長篇文章和僅限影片的文章。

砌體工作非常好，但我遇到了一些問題，我想如何訂購元素。只有圖像的職位比長篇文章的寫作高得多。同位素在元素列表中移動並基於先前放置的元素的位置爲每個項目選擇最理想的位置，。

問題是，如果在長表單發佈之前輸出兩個短的僅限圖像的帖子，則佈局會在一列中變得非常長，而在另一列中變得非常短。我看到的是像這樣的佈局：

我不是很在意的任何數據（日期，作者，類別等）的訂購博客文章。我真的很在意佈局看起來不錯。如果Isotope根據最高效/精簡的佈局定位了元素，那將會很棒。空白越少越好。在一個完美的世界，佈局會看起來像：

有誰知道的一種方式來獲得同位素 - 或任何其他磚石庫 - 做到這一點？

Answer 1

我不知道任何東西外的開箱即會解決這個問題，但您可以添加自己的功能..

可以extend Isotope提供自己的custom layout mode。擴展點非常簡單，您可以重複使用大部分的masonry logic。

問題是，默認砌體邏輯使用貪婪算法。首先按高度對項目進行排序，然後將下一個最高元素分配給當前較短的行，可以做得更好。這是對Partitioning Problem的優化。將項目分配到行後，您可以按行按行進行重新排序。

砌築邏輯爲O(n)，這將是O(n*log(n))。但由於你的元素數量很少，我不會擔心複雜性。