How to avoid animation of elements that will not fit in the width of the screen?

Question

I created an animation in jQuery for a customer’s Christmas card. However, on 1024x768 or 800x600 resolution screens, elements appear in strange places:

The code below hides the balls at startup, then will show up one by one until no more:

// prepare balls
$('#balls img').each(function(){
    $(this).css({
        "opacity" :  0,
        "top"     : "-" + $(this).height() + "px"
    });
});

// animate balls
function gimeBalls(){

    $("#balls img:not('.done'):first").animate({
        "opacity" : 1,
        "top"     : 0
    }, 400, function() {
        $(this).addClass("done");
    });
}

setInterval(gimeBalls, 400);

Problem

Since the images are all floating on the left, if the last image is not high enough to occupy the entire height of the container, the image that follows will look like the screenshot shown above.

Question

How can I with jQuery detect that the element to be displayed next will no longer fit the width of the screen, thus stopping the animation for all other elements?

See Jsfiddle with full and working example.

^{Note: If the "bug" is not visible, simply stretch or shrink the preview square width until it is noticed. Since the images are in my Dropbox, the first access to Fiddle is "strange" until the images have been downloaded.}

---

^{Known solution}

^{The solution that can solve this, is to put all the balls in png with the height of the container where they are being presented, so no more spaces that cause this problem. However, this brings more download load for those who watch the animation, so I would like to avoid this solution. On the other hand, answering the question above, one can avoid animating elements that are not even visible.}

Answer 1

Just modify the CSS by removing float and aligning vertically to the top, updated example: http://jsfiddle.net/BzuR2/1/

#balls > img {
    display: inline-block;
    margin-left:28px;
    vertical-align: top;
}

Answer 2

Here is a suggestion:

var wrapperWidth = $('#balls').width();
$('#balls img').each(function(){
    $(this).css({
        "top"     : "-" + $(this).height() + "px",
        "left"    : Math.floor(Math.random() * wrapperWidth) + "px"
    });
});

CSS:

#balls > img {
    margin-left:28px;
    position: absolute;
    opacity: 0;
/* removi  float:left; */
}

Example

What I have changed:

• I removed the opacity: 0; in jQuery, better use in CSS for the balls to be hidden from the start (jQuery can take a while to run and thus avoid the balls to appear suddenly)
• added a random positioning of the balls with Math.floor(Math.random() * wrapperWidth) + "px"
• added a position: absolute; for Animate:top to work.