如何将数字分解为随机生成的部分

Question

I want to make a div that is full width on the page. It's a container. Then I want to fill it in with divs, and width of each div is 50*n, where n is a randomly generated number. Assume I have a container div with width of 1240px. Now I run a JS function that fills it with eg 10 divs with different widths. Now if I sum up all inner divs widths, I get 1240px.

This way I always know that when I run filling function, I get a collection of divs that altogether always are 1240px. Number of divs shouldn't be a fixed number, so there can be 4 or 7 divs. The number of divs amount is generated randomly. Then, if there is some space left, for 1240 px this number is 40px I suppose, it is filled with some dummy div that doesn't have to be of 50*n width.

I have created a function but it doesn't always work as supposed to.

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

I am not even sure it's a good way I have chosen to solve such a task. Please share your thoughts on how to better do this.

Answer 1

I've refactored the code from your answer a bit.

See: 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

I played a little more with the code and it seems I made it work properly, though I am sure there is something to improve.

Here is the code:

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

}

Here is an screenshot of how it works. The bottom row is the result for another width of the page.

Answer 3

A couple of problems:

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

Here you have already "gone over" the original width with the fullwidth variable, so when you do originalwidth - fullwidth it's always negative (by definition because fullwidth > originalwidth ).

Another problem is that if the random width is for example 150 pixels and you have 140 pixels of space left, your code considers that as space running out and puts in the dummy div of 140 px. It's not clear from your question but you probably want a 100 px block and the rest filled with a 40 px block.

Here's a working version:

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