为最有效的布局订购砌体项目

Question

我正在使用jquery-isotope在我正在处理的网站上创建博客文章的砖石布局。布局是两列，有两种帖子类型 - 长格式书写和仅图像帖子。

砌体工作得非常好，但我遇到了一些问题，我想要如何订购元素。仅图像的帖子高度明显短于长文字书写。同位素在元素列表中移动并为每个项目选择最理想的位置，基于先前放置的元素的位置。

问题在于，如果我在长格式帖子之前输出了两个短的仅图片帖子，那么布局可能在一列中变得非常长而在另一列中非常短。我看到的布局看起来像这样：

我不太关心按任何数据（日期，作者，类别等）订购博客文章。我真的很在乎布局看起来不错。如果Isotope基于最有效/最精简的布局定位元素，那将是很棒的。空白越少越好。在完美的世界中，布局看起来像：

有没有人知道如何让Isotope - 或任何其他砌体库 - 这样做？

Answer 1

我不知道任何可以帮助解决此问题的开箱即用，但您可以自己添加功能..

您可extend Isotope提供自己的custom layout mode。扩展点非常简单，您可以重复使用masonry logic的大部分内容。

问题是默认的砌体逻辑使用贪婪算法。您可以通过首先按高度排序项目，并将下一个最高元素分配给当前较短的行来做得更好。这是Partitioning Problem的优化。将项目分配给行后，可以按行重新排序。

如果砌体逻辑为O(n)，则为O(n*log(n))。但由于元素数量很少，我不担心复杂性。