根据内容大小动态重新排序div

Question

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

基本上我正在寻找一些javascript（JQuery对我所拥有的代码库来说有点过分）能够指定div的顺序，甚至更好地为脚本找出图片本身的最佳位置

编辑：稍微澄清一下，使用PHP-GD在服务器端生成图像，一次调用1，将在div中返回这些动态生成的图像。没有希望与下面的ascii我能展示我正在获得什么以及我想要实现的目标

所以目前我的图像按照html中列出的顺序加载和浮动（我不能预先安排它们，因为图像的大小每次都会改变，我可能会得到所有小/大的正确浮动或者如下所示）：

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

我希望动态实现或者在图像加载后使用某种排序代码实现，并且我知道它们的宽度/高度在下面已经从上面的安排开始：

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

Answer 1

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

为了防止页面负载在整个地方闪烁，我会执行以下操作。

    

在公共容器中渲染图像（例如左：-9999px）（假设为<div id="myImageContainer"></div>）

    

获取所有图片... var imageArray = document.getElementById("myImageContainer").getElementsByTagName("img");

    

根据imageArray[i].offsetWidth或类似的内容对数组进行排序。

    

将图像插入到实际需要显示的新容器中。

Answer 2

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

Resizing dynamic images not working more than one time

问题是，图片需要时间加载。在知道所有图像的大小之前，您无法按照自己的意愿对它们进行排序。但要实现这一点，您（通常）需要等待所有图像完全加载。但是，该实用程序可以让您轻松获得图像的大小，而不是等待加载完整图像。

另一种方法是让服务器端从一开始就为您提供图像的大小，但如果没有，我建议放入我的实用程序，或修改其逻辑以满足您的需要（即启动一个监视每个图像以获得宽度和高度的计时器。