番号をランダムに生成された部分に分割する方法

Question

divをページ上の全幅にしたいとします。それはコンテナです。次にdivでそれを埋めたいと思います。各divの幅は50 * nです（nはランダムに生成された数値です）。幅1240ピクセルのコンテナdivがあるとします。今私はそれをいっぱいにするJS関数を実行します。幅の異なる10のdiv。今度はすべての内部divsの幅を合計すると、私は1240pxを取得します。

このようにして、私がfill関数を実行すると、常に1240pxのdivのコレクションが得られます。 divの数は固定数であってはならないので、4つまたは7つのdivがあります。 divs量の数はランダムに生成されます。次に、スペースが残っている場合、1240 pxの場合、この数値は40 pxです.50 * n幅でなくてもよいダミーdivで埋められます。

私は関数を作成しましたが、必ずしもそうなるとは限りません。

function generateItems() { 
    originalwidth = $(document).width() - 40; 
    var fullwidth = 0; 
    var counter = 0; 
    do{ 
     var randomnumber = 1 + Math.floor(Math.random() * 4); 
     tempwidth = 50 * randomnumber; 
     fullwidth += tempwidth; 
     if (fullwidth > originalwidth) { 
      $('#questions').append('<div class="question-area" style="width:' + (originalwidth - fullwidth) + 'px;"><strong>' + (originalwidth - fullwidth) + '</strong></div>'); 
      break; 
     } 
     width_padding = tempwidth; 
     $('#questions').append('<div class="question-area" style="width:' + width_padding + 'px;">' + width_padding + '</div>'); 
     counter++; 
    } 
    while (true); 
} 

私はこのような課題を解決するのに良い方法であるとは確信していません。これをよりうまくやり遂げる方法について、あなたの考えをお伝えください。

Answer 1

私はあなたの答えビットからコードをリファクタリングしました：

は、ここで作業バージョンです。

を参照してください：http://jsfiddle.net/thirtydot/Bk2yw/

function generateItems() { 
    var slotWidth = 50, 
     maxSlots = 3, 
     thisSlotNum, thisWidth; 
    var remainingSlots = Math.floor($('#questions').width()/slotWidth), 
     remainingWidth = $('#questions').width() % slotWidth; 

    while (remainingSlots > 0) { 
     thisSlotNum = Math.min(remainingSlots, 1 + Math.floor(Math.random() * maxSlots)); 
     remainingSlots -= thisSlotNum; 

     thisWidth = thisSlotNum * slotWidth; 
     $('#questions').append('<div class="question-area" style="width:' + thisWidth + 'px;"><strong>' + thisWidth + '</strong></div>'); 
    } 
    if (remainingWidth) { 
     $('#questions').append('<div class="question-area" style="width:' + remainingWidth + 'px;"><strong>' + remainingWidth + '</strong></div>'); 
    } 
} 

Answer 2

私はコードをもう少し演奏しましたが、正しく動作させるように見えますが、改善の余地があると確信しています。ここで

はコードです：ここでは

function generateItems() { 
    originalwidth = $(document).width() - 40; 
    $('#questions').css('width', originalwidth); 
    var fullwidth = 0; 
    var counter = 0; 
    do{ 
     var randomnumber = 1 + Math.floor(Math.random() * 4); 
     tempwidth = 50 * randomnumber; 
     fullwidth += tempwidth; 
     if (fullwidth > originalwidth) { 
      $('#questions').append('<div class="question-area" style="width:' + (originalwidth + tempwidth - fullwidth) + 'px;"><strong>' + (originalwidth + tempwidth - fullwidth) + '</strong></div>'); 
      break; 
     } 
     width_padding = tempwidth; 
     $('#questions').append('<div class="question-area" style="width:' + width_padding + 'px;">' + width_padding + '</div>'); 
     counter++; 
    } 
    while (true); 

} 

は、それがどのように動作するかのスクリーンショットです。一番下の行は、ページの別の幅の結果です。あなたはすでにあなたがoriginalwidth - fullwidthを行うとき（fullwidth > originalwidthので、定義によって）ので、それは常に負です、全角変数で元の幅「乗り越え」ている

ここ

fullwidth += tempwidth; 
if (fullwidth > originalwidth) { 
    $('#questions').append('<div class="question-area" style="width:' + (originalwidth - fullwidth) + 'px;"><strong>' + (originalwidth - fullwidth) + '</strong></div>'); 
    break; 
} 

：

Answer 3

問題のカップル。

もう1つの問題は、ランダムな幅がたとえば150ピクセルで、140ピクセルのスペースが残っていると、コードではスペースがなくなり、140 pxのダミーdivに配置されるとみなされるということです。あなたの質問からは明らかではありませんが、おそらく100ピクセルのブロックが残り、残りのピクセルは40ピクセルのブロックが必要です。

function generateItems() { 
    var originalwidth = $(document).width() - 40; 
    var fullwidth = 0; 
    var counter = 0; 
    do{ 
     var randomnumber = 1 + Math.floor(Math.random() * 3); 
     var tempwidth = 50 * randomnumber; 
     if (fullwidth + tempwidth > originalwidth) { 
      var diff = originalwidth - fullwidth; 
      if(originalwidth - fullwidth > 50) { 
       tempwidth = diff - (diff % 50); 
      } 
      else { 
       $('#questions').append('<div class="question-area" style="width:' + diff + 'px;"><strong>' + diff + '</strong></div>'); 
       break; 
      } 
     } 
     fullwidth += tempwidth; 
     $('#questions').append('<div class="question-area" style="width:' + tempwidth + 'px;">' + tempwidth + '</div>'); 
     counter++; 
    } 
    while (true); 
}