用div填充div

Question

在这个例子中，我使用jquery来加快速度。但它更多的是关于css。

我想知道，有没有办法用内容div填充容器div，以便我尽可能看到最小的小猫。

HTML：

<div id="container">
</div>

的CSS：

#container {
   width: 640px;
   background-image: url('http://critterbabies.com/wp-content/gallery/kittens/Kitten-pic-cute-kittens-16292210-1024-768.jpg');
   -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
   min-height: 640px;
   margin: 0 auto;
}

.content {
   background: blue;
    float: left;
}

jquery / js为方便起见：

randomColor = function() {      return "rgba("+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+","+"1)"
}


for (var i = 0; i < 10; i++) {

    var w = 160;
    var h = Math.floor(Math.random()*300);
    var color = randomColor();

    $newDiv = $('<div class="content">');

    $newDiv.css(
        {"background" : color,
         "width" : w,
         "height" : h
        });

    $("#container").append($newDiv);


}

Answer 1

您就是这样做的：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

<script type="text/javascript">

randomColor = function() {
    return "rgba("+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+","+"1)"
}

$(document).ready(function()
{
    var i = 1;
    while (i <= 10) {
        var w = 160;
        var h = Math.floor(Math.random()*300);
        var color = randomColor();
        jQuery('<div/>', {
            id: 'newDiv' + i,
            style: 'width: '+ w +'; height: '+ h +'; background: '+ color +';'
        }).appendTo('#container');
        i++;
    }
});


</script>

<style type="text/css">
#container {
   width: 640px;
   background-image: url('http://critterbabies.com/wp-content/gallery/kittens/Kitten-pic-cute-kittens-16292210-1024-768.jpg');
   -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
   min-height: 640px;
   margin: 0 auto;
}
.content {
   background: blue;
    float: left;
}
</style>

<div id="container">
</div>

这会产生以下结果......不确定这是否是你想要的：

Answer 2

更改以下JS函数：

for (var i = 0; i < 10; i++) {

    var w = 160;
    var h = Math.floor(Math.random()*300);
    var color = randomColor();

    $newDiv = '<div class="content">';

    $("#container").append($newDiv);


}

这将动态添加div。