代码之家 › 专栏 › 技术社区 › Tristan

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

html javascript

Tristan · 技术社区 · 14 年前

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

基本上,我在寻找一些javascript(JQuery对于我所拥有的代码库来说是多余的)来指定div的顺序,或者更好地让脚本自己找出图片的最佳位置

编辑:再澄清一下,这些图像是在服务器端使用PHP-GD生成的,一次调用一个,调用这个调用将返回这些动态生成的图像,并将其放在div中。不希望使用下面的ascii,我可以显示我得到了什么和我想要实现什么

因此,目前我的图像按html中列出的顺序加载和浮动(我无法预先安排它们,因为图像的大小每次都会更改,我可能会得到所有正确浮动的大小图像或类似于下面的内容):

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

我希望在加载图像并知道它们的宽度/高度后,动态地或使用某种排序代码来实现以下目标:

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

2 回复 | 直到 14 年前

Brendan 14 年前

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

为了不让你的页面负载到处闪烁,我将执行以下操作。

将图像从页面上呈现出来(例如,左侧:-9999px)在一个公共容器中(假设


    <div id="myImageContainer"></div>

)

获取所有图像。。。


    var imageArray = document.getElementById("myImageContainer").getElementsByTagName("img");

根据


    imageArray[i].offsetWidth

或者类似的事情。

将您的图像插入一个新容器中,您实际上希望在其中显示它们。

Community CDub 8 年前

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

Resizing dynamic images not working more than one time

问题是,加载图像需要时间。除非你知道所有图片的大小,否则你无法按你的意愿对它们进行排序。但要做到这一点,您(通常)需要等待所有图像完全加载。但是,该实用程序将使您在图像可用时很容易获得图像的大小,而不是等待加载完整的图像。

另一种方法是让服务器端从一开始就为您提供图像的大小,但在没有这种方法的情况下,我建议要么直接使用我的实用程序,要么修改它的逻辑以满足您的需要(即启动一个计时器,监控每个图像的宽度和高度)。