random float left elements number

by evpozdniakov

HTML

<div class="box clearfix">
</div>

CSS

body {
    padding: 20px;
}

.box {
    padding: 0 5px;
    width: 450px;
    border: 2px solid #ccc;
}

.thumbnail {
    float: left;
    margin: 10px 5px;
    width: 100px;
    height: 100px;
    border: 1px solid #00f;
    background: #eef;
}

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

JavaScript

$(function(){
    var thumbnailsNumber = Math.round(Math.random() * 10) + 5;
    for (var i = 0; i < thumbnailsNumber; i++) {
        $('.box').append($('<div class="thumbnail"></div>'));
    }
})