如何按维度对图像进行排序答案

【问题标题】：How to Sort Images by Dimension如何按维度对图像进行排序
【发布时间】：2015-02-14 23:14:06
【问题描述】：

我尝试在网页中查找所有图像，将它们添加到数组中，检查它们的尺寸并相应地对数组进行排序。

var images = document.getElementsByTagName("img");
var image_dimensions=[];
for(var i=0;i<images.length;i++){
    image_dimensions.push(images[i].width+"x"+images[i].height);
}

//var image_dimensions = ["45x67", "68x45", "12x23", "124x90"];

我想根据图像的尺寸对图像进行排序并更新images 数组。我试图将尺寸推入image_dimensions 并对其进行排序，但后来我无法弄清楚如何将尺寸与实际的 img 节点联系起来。

如何按维度对网页中的图像进行排序？

【问题讨论】：

作为旁注，在获得尺寸之前必须完成图像的加载

标签： javascript arrays image sorting

【解决方案1】：

根据您制作的 cmets，我认为您真正想要排序的是每个图像的总面积（高度 * 宽度）。您可以通过使用带有自定义比较功能的sort 方法来做到这一点。

var sortedImgs,
  imgs = document.getElementsByTagName('img'); // returns a NodeList,
                                               // an array-like object

imgs = [].slice.call(imgs); // convert into a real array

sortedImgs = imgs.sort(function (a, b) {
  // Compute the area of each image
  var aArea = a.width * a.height,
    bArea = b.width * b.height;
  // compare the area of each
  return aArea - bArea;
});

比较函数从a 中减去b 的面积并将该值返回给排序函数：

如果他们有相同的区域，这将返回0，告诉排序他们是平等的
I 如果b 大于a，将返回一个负数，告诉sort 将a 排序更低。
如果a 大于b，将返回一个正数，告诉sort 将b 排序更低。

交换 aArea 和 bArea 会翻转这些结果，颠倒排序顺序。

其他答案出于某种原因使用了clientWidth 和clientHeight； clientWidth 和 clientHeight 包括可能在元素上的任何 padding。（尽管很疯狂，images can have padding。）我使用了.width 和.height，假设您对图像本身的实际尺寸感兴趣，而不是添加任何样式。

【讨论】：

正如你所指出的，我也想过将宽度和高度相乘，但有一些奇怪的情况。说100x20 图像比1x3000 图像更有意义，我想。所以我不确定使用哪种算法。您的另一个clientWidth 点是正确的，所以我将其更改为width。但是如果有人将width="500" 属性添加到图像标签，img.width 将变为“500”，即使原始图像为20px 宽。所以它可能再次被计算为错误clientWidth。
@Seixl 你的意思是你需要保存图像的原始大小吗？如果是这样，您可以使用naturalWidth/Height，尽管 IE 不支持它。
@Teemu，是的，naturalWidth 在我的情况下做得更好。谢谢。您的方法效果很好，但Useless Code 算法也有一些逻辑。这两种方法可以以任何方式组合吗？
是的，当imgs缩放时，width X height就是缩放后的大小，必须使用naturalWidth X naturalHeight才能得到原始大小！

【解决方案2】：

使用二维数组并包含图像元素，如下所示：

var images = document.getElementsByTagName('img');
var imageDimensions = [];
for(var i = 0; i < images.length; i++) {
    imageDimensions.push([images[i].clientWidth, images[i].clientHeight, images[i]]);
}

imageDimensions.sort(function (a, b) {
    if (a[0] - b[0] === 0) {
        return a[1] - b[1];
    }
    return a[0] - b[0];     
});

clientWidth/Height 返回您在页面上看到的图像大小。

结果：

imageDimensions = [
    [width, height, HTMLImageElement],
    [width, height, HTMLImageElement],
                   :
]

正如 adeneo 在评论中提到的那样，您必须在图像完全加载后执行此操作，例如将代码放入 window.onload 事件处理程序中。

【讨论】：

看起来不错。但它是从小到大排序的。我怎样才能从大到小排序？
降序切换所有as和bs，即b[0]-a[0]等
谢谢。我会接受你的回答。但这似乎主要是根据宽度排序的吧？如果一张图片是100x75 而另一张图片是95x200，会发生什么？哪个应该算大？
宽度是主要术语，100x75 被认为更大。如果找到两个相等的宽度，则代码按高度排序。
@Seixl 您也可以使用a 和b 在我的代码中计算面积。这两种算法的基本区别在于，我的代码存储了大小值以供以后使用。在这两种情况下，您都可以应用纵横比甚至平方和来指导排序。在我之前的评论中，我错误地说 IE 不支持naturalWidth/Height，它们在 IE>8 中受支持。

【解决方案3】：

您可以使用clientWidth 和clientHeight 属性查找维度，如here 所述。找到维度后，您可以使用函数.sort() 进行排序。

请查看this 链接以供参考。

【讨论】：