这个问题的标题可能有点误导,但它最准确地描述了我遇到的问题。
我目前正在编写一个自定义灯箱脚本,类似于可以在 Facebook 和 airbnb 上找到的那个。一旦用户单击图像,灯箱不会根据内容调整大小,而是图像以围绕它的黑色区域为中心(如果您是普通的 FB 用户,您应该知道我的意思)。
我将要用于灯箱的图像存储在 JS 数组中,如下所示(从 MySQL 数据库生成:
var item_images = [
{ 'id': 2, 'url': '50929ab7ae8e5.jpg', 'caption': 'My Photo # 1', 'width': 1000, 'height': 750 },
{ 'id': 7, 'url': '50929ab7ae8e8.jpg', 'caption': 'My Photo # 1', 'width': 1000, 'height': 800 },
{ 'id': 3, 'url': '50929ac161d10.jpg', 'caption': 'My Photo # 2', 'width': 1000, 'height': 750 },
{ 'id': 4, 'url': '50929acbe8dc8.jpg', 'caption': 'My Photo # 3', 'width': 1000, 'height': 750 }
];
我需要 JS 中的一个函数来查找图像所需的最大宽度和最大高度。例如,给定上面的数据,我想要一个函数GetMaxSizes()
,它将返回800
(数组中的最大高度)和1000
(数组中的最大宽度)。
有没有比遍历整个数组并比较所有内容更有效的方法?我担心如果里面有很多元素,这会变慢item_images
:
function GetRequiredHeight()
{
var req_height = 0,
req_width = 0;
for(var i in item_images)
{
var image = item_images[i];
if(image.width > req_width) { req_width = image.width };
if(image.height > req_height) { req_height = image.height };
}
return { width: req_width, height: req_height };
}