javascript - 如何按维度对图像进行排序

Question

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

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 节点相关联。

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

Answer 1

根据您的评论，我认为您真正想要排序的依据是每张图片的总面积(高度 * 宽度)。您可以使用 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，告诉 sort 它们相等
• I 如果b大于a，将返回一个负数告诉sort对a进行排序降低。
• 如果a大于b，将返回一个正数告诉sort将b排序为低.

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

其他答案都用了clientWidth和 clientHeight因为某些原因; clientWidth 和 clientHeight 包括任何 padding那可能在元素上。 (虽然很疯狂，images can have padding。)我使用了 .width 和 .height，假设您对图像本身的实际尺寸感兴趣，而不是任何添加到其中的样式。