Javascript 基于内容大小动态重新排序的div

我有一些div，当页面加载时填充了不同大小的图像（每次加载页面时这些图像都会改变）。我让div浮动以最大限度地利用页面空间。但是如果先有一个小图像，然后是一个大图像，然后是另一个小图像，第三个我希望能够将第三个图像浮动到第一个图像旁边，因为它们可以在页面上彼此相邻

基本上，我在寻找一些javascript（JQuery对于我必须的代码库来说太过分了），以便能够指定div的顺序，或者更好地让脚本找出图片本身的最佳位置

编辑：只需进一步澄清一下，这些图像是使用PHP-GD在服务器端生成的，每次调用一个，它将返回这些动态生成的图像，并在divs中显示。不，希望通过下面的ascii，我可以展示我得到了什么以及我想要实现什么

因此，目前我的图像按照html中列出的顺序加载和浮动（我无法预先安排它们，因为图像的大小每次都会改变，我可能会得到所有正确浮动的大小图像或类似于以下内容的图像）：

一旦图像加载完毕，并且我知道它们的宽度/高度，我希望动态地或通过某种排序代码实现以下目标，从上面的排列开始：

| --------- --------- |
| |       | |       | |
| |       | |       | |
| |       | |       | |
| --------- --------- |
| ------------------- |
| |                 | |
| |                 | |
| |                 | |
| ------------------- |

是否可以在服务器端获取图像的尺寸？如果是这样，您可以执行以下排序，并按照所需的顺序写出原始HTML，以便页面实际在正确的位置加载图像

为了不让你的页面负载到处闪烁，我会做以下的事情

在公共容器中呈现页面外的图像（例如左：-9999px）（假设

）

获取所有图像<代码>var imageArray=document.getElementById（“myImageContainer”）.getElementsByTagName（“img”）

根据

imageArray[i].offsetWidth

或类似内容对数组进行排序

将图像插入一个新的容器中，在其中显示图像。

我建议使用我在此处发布的“ImageLoader”实用程序：

问题是，图像加载需要时间。在了解所有图像的大小之前，您无法按照自己的意愿对它们进行排序。但要做到这一点，您（通常）需要等待所有图像完全加载。但是，该实用程序将使您能够轻松地在图像可用时获取图像的大小，而不是等待加载完整图像

---

另一种选择是在服务器端安装一些东西，从一开始就为您提供图像的大小，但如果没有，我建议要么删除我的实用程序，要么修改其逻辑以满足您的需要（即启动一个计时器，监控每个图像的宽度和高度）.

是否从数据库中提取图像以生成页面？定义“最佳位置”。在你向我们详细解释之前，我们无法确定你到底在想什么。我觉得这有点老套，因为我希望有一种更自然的做事方式，希望有一个浮动选项。但这确实奏效了，我很高兴。谢谢

| --------- --------- |
| |       | |       | |
| |       | |       | |
| |       | |       | |
| --------- --------- |
| ------------------- |
| |                 | |
| |                 | |
| |                 | |
| ------------------- |