如何组织一组模块化 Div

Question

我正在编写包含帖子流的网站部分。这些帖子大小不一，但只包含文字。我想做的是从服务器获取帖子的文本，然后：

1. 按包含的字符数将它们组织成大、中和小号帖子。

2. 将帖子组合成一个堆栈，以便在显示时，所有帖子都与边缘齐平。这要求每行帖子的宽度相同。

帖子位于一个 div 中，该 div 设置为在帖子溢出时自动将其放在下一行，因此唯一的问题是将帖子按正确的顺序放置在 div 中。

例如图/图2的代码是：

<div class="small_posts" ></div><div class="medium_posts"></div>
<div class="medium_posts"></div><div class="small_posts" ></div>
<div class="small_posts" ></div><div class="tiny_posts"  ></div><div class="tiny_posts"></div>

帖子的文本来自 MySQL 数据库的线性数组，我正在使用 PHP 接收和显示它。

我的问题不是如何在 PHP 中实现这一点，而是首先如何设计一个算法来做到这一点。

到目前为止，我尝试的设计都是粗制滥造的黑客，质量太低，无法提及。

我非常感谢一些关于如何设计一种算法来有效地将这些帖子分类为同花行的建议。

Answer 1

您还可以使用 javascript 找到解决方案 看看这个插件http://masonry.desandro.com/