0

Webページのバナーdiv内に画像を配置しようとしています。画像は（CSSプロパティを使用して）x軸に沿って「ランダムに」配置する必要があるleftため、ページが読み込まれたときに常に同じように表示されるとは限りません。これを行うための次のスクリプトがあります（ランダムな遅延も設定されるため、画像は毎回異なる時間順序で表示されます。

for (var i = 1; i <= 5; i++) {

    var delay = Math.floor(Math.random() * 800) + 1;
    var xPos = Math.floor(Math.random() * 900) + 1;

    $('#item'+i).css('left',xPos+'px').delay(delay).animate({ top: 18 }, { duration: 1000, easing: 'easeOutBounce' });

}

ただし、問題は、画像との重複が多すぎて、画像が互いに隠れていることです。したがって、すべてのxPos変数の間に少なくとも100pxの差があるように、ランダム性を歪めたいと思います。これにより、ランダムに見えるようになりますが、アイテムもほとんど表示されたままになります。

この種のことを説明する言葉があるに違いありませんが、検索したところ、それを達成する方法を示すのに役立つものは何も見つかりませんでした。

誰かが私をここで正しい方向に向けることができますか？

どうもありがとう。

編集：

さて、これを行うために自分の関数をローリングしてみてください。もうすぐそこにいると思います。私がやっていることは、最初の乱数を作成してこれを配列に追加し、次に5つの項目のそれぞれをループして別の乱数を生成し、これを比較して、現在配列内にあるものと100以上異なることを確認することです。

コードは次のようになります（現在、すべての変数が使用されているわけではありません。これは進行中の作業です！）：

function randomImagePlacement() {
    var containerWidth = 940;                   // Width of container element
    var itemWidth = 267;                        // Width of item (taking into account rotation)
    var minX = 0;                               // Minimum left position of an item
    var maxX = containerWidth - itemWidth;      // Maximum left position of an item
    var minSeparation = 100;                    // Minimum number of pixels of separation between items
    var numberOfItems = 5;                      // Total number of items
    var randomNumbers = [];                     // Array 'container' to hold random numbers

    for (var i = 1; i <= numberOfItems; i++) {

        if (i == 1) {
            var firstRandomNumber = Math.floor(Math.random() * 700) + 1;
                    randomNumbers.push(firstRandomNumber);
                    console.log('First random number: ' + firstRandomNumber);
        } else {
                    var newRandomNumber = Math.floor(Math.random() * 700) + 1;

            /*
            This if/else block works okay but it doesn't keep checking differences until the criteria is met
            if (checkDiff(newRandomNumber, randomNumbers)) {
                        console.log('New number (' + newRandomNumber + ') sufficiently different enough');
                        randomNumbers.push(newRandomNumber);
            } else {
                        console.log('New number (' + newRandomNumber + ') NOT sufficiently different enough');
            }
            */
            /* This do/while block is my attempt at trying to run the check diff function until the criteria is met, but it just results in the browser crashing */     
            do {
                        randomNumbers.push(newRandomNumber);
            } while (checkDiff(newRandomNumber, randomNumbers) == true);

        }

    }

    for (var i = 0; i < randomNumbers.length; i++) {
        console.log('From final array: ' + randomNumbers[i]);
    }

}


function checkDiff(newRandomNumber, currentArray) {
    console.log('newRandomNumber = ' + newRandomNumber);

    var proximityMatch = false;
    for (var i = 0; i < currentArray.length; i++) {
        console.log('Diff between ' + currentArray[i] + ' and ' + newRandomNumber + ' = ' + Math.abs(currentArray[i] - newRandomNumber));
        if (Math.abs(currentArray[i] - newRandomNumber) > 100) {
            proximityMatch = true;
        }
    }
    if (proximityMatch == true) {
        return true;
    } else {
        return false;
    }
}

randomImagePlacement();

基本的に、失敗するのは上記のdo/whileループです。このようなことを行う正しい方法はわかりませんが、基本的には「trueが返されるまでcheckDiff関数を実行し続けます。trueが返される場合は、配列にnewRandomNumberを追加します。返されない場合は」と言う必要があります。真にもう一度実行してください」。

誰かがこれについて私を助けることができますか？

どうもありがとう！

4

2 に答える 2

0

これにアプローチできる可能性のある方法は次のとおりです。

item0.x=//乱数

item1.x = item0.x + item0.width + 100 +（乱数）

item2.x = item1.x + item1.width + 100 +（乱数）

等

于 2013-01-28T17:34:31.957 に答える
0

アップデート

申し訳ありませんが、生成されたすべての値を比較する必要があることに気づきませんでした。これは機能します：

var isLessThanMinSeparation = function checkDiff(randomNumber, randomNumbers, minSeparation) {
    var lessThan100 = false,                // Flag for whether minSeparation has been maintained
        i = 0;                              // Incrementer
    console.log('randomNumber = ' + randomNumber);
    for (i = 0; i < randomNumbers.length; i += 1) {
        console.log('Diff between ' + randomNumbers[i] + ' and ' + randomNumber + ' = ' + Math.abs(randomNumbers[i] - randomNumber));
        lessThan100 = lessThan100 || Math.abs(randomNumbers[i] - randomNumber) <= minSeparation;
    }
    return lessThan100;
};
var randomImagePlacement = function randomImagePlacement(numberOfItems, minSeparation) {
    //numberOfItems = 5,                    // Total number of items
    //minSeparation = 100,                  // Minimum number of pixels of separation between items
    var randomNumbers = [],                 // Array 'container' to hold random numbers
        randomNumber = 0,                   // Random number
        i = 0;                              // Incrementer
    for (i = 1; i <= numberOfItems; i += 1) {
        while (isLessThanMinSeparation(randomNumber, randomNumbers, minSeparation)) {
            randomNumber = Math.floor(Math.random() * 700) + 1;
        }
        randomNumbers.push(randomNumber);
    }
    return randomNumbers;
};
console.log(randomImagePlacement(5, 100));

私がこれを達成する方法は次のとおりです。

  1. 最後にランダムに割り当てられた位置を保存します
  2. ループを使用して（最小実行回数は1回）、ランダムに割り当てられた新しい位置を割り当てます
  3. ランダムに割り当てられた新しい位置を比較し、差が100未満の場合は、ループに再度入ります

例：

var randomizeImgPlacement = function randomizeImgPlacement() {
    var i = 0,
        delay = 0,
        xPos = 0,
        lastPos = 1000; //Default to 1000 so very first assignment has at least 100 difference
    for (i = 1; i <= 5; i += 1) {
        delay = Math.floor(Math.random() * 800) + 1;
        do { //loop assignment of xPos
            xPos = Math.floor(Math.random() * 900) + 1;
        } while (Math.abs(xPos) - Math.abs(lastPos) >= 100); // while difference is < 100
        $('#item' + i).css('left', xPos + 'px').delay(delay).animate({
            top: 18
        }, {
            duration: 1000,
            easing: 'easeOutBounce'
        });
        lastPos = xPos; //store lastPos for loop comparison
    }
};
于 2013-01-28T17:48:47.230 に答える