jquery - 用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>

这会产生以下...不确定这是否是您想要的: