1

この質問のタイトルは少し誤解を招くかもしれませんが、私が抱えていた問題を正確に説明するのに最も近いものでした.

私は現在、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()を返す関数が必要です。8001000

配列全体をループしてすべてを比較するよりも効率的な方法はありますか? 私の懸念は、内部に多くの要素がある場合、これが遅くなることです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 };
}
4

1 に答える 1

1

これは O(n) の複雑さであり、それ以上のものは想像できません。10000 個の要素を持つ配列の反復は、何年もの間大したことではありません。ここに何枚の写真を保存しますか? ミリオン？アルゴリズムの速度が低下した場合は、さまざまな理由を探します。

この繰り返しを 1 回行うと仮定します。この配列を頻繁に変更したい場合は、配列全体を常にトラバースすることを避けるために、いくつかの最適化を行うことができます。良いアイデアがありますが、それはもっと書いているので、必要な場合はこの回答にコメントしてください。

于 2012-11-06T11:34:04.777 に答える