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;
});

compare函数从b中减去a的区域，并将该值返回给sort函数：

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

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

其他答案出于某种原因使用了clientWidth和clientHeight; clientWidth和clientHeight包含可能在该元素上的任何padding。（虽然很疯狂，images can have padding。）我使用.width和.height，假设您对图片本身的实际尺寸感兴趣，而不是任何已添加到的图案它

Answer 2

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

请查看this链接以获取参考。

Answer 3

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

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事件处理程序中。

如何按维度排序图像

3 个答案: