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

Question

我正在使用jquery-isotope 在我正在开发的网站上创建博客文章的砌体布局。布局为两列，有两种帖子类型 - 长篇文章和纯图片帖子。

砌体工作得很好，但我遇到了一些关于如何排序元素的问题。仅图像的帖子的高度明显短于长篇文章。同位素在元素列表中移动并为每个项目选择最理想的位置，基于之前放置的元素的位置。

问题在于，如果我在长篇文章之前输出了两个仅包含图片的短篇文章，则布局可能会在一列中变得非常长，而在另一列中变得非常短。我看到的布局如下所示：

我不太关心按任何数据（日期、作者、类别等）对博客文章进行排序。我真的只关心布局看起来不错。如果 Isotope 基于最有效/最精简的布局定位元素，那就太好了。空格越少越好。在一个完美的世界中，布局应该是这样的：

有谁知道获取同位素（或任何其他砌体库）的方法吗？

Answer 1

我不知道有什么开箱即用的东西可以帮助解决这个问题，但您可以自己添加功能..

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

问题在于默认的砌体逻辑使用了贪心算法。您可以通过首先按高度对项目进行排序，然后将次高元素分配给当前较短的行来做得更好。这是对Partitioning Problem 的优化。将项目分配给行后，您可以按日期在行内重新排序。

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