W–1: Demo

by Alexus fox

HTML

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

CSS

img {
   width: 40px;
    height: 40px;
}

.tile1 {
      background-image: url("http://dummyimage.com/40x40/000/fff.jpg");
}
.tile2 {
    background:blue;
}

.tile3 {
background-image: url("http://dummyimage.com/40x40/ffb700/00ff2b.jpg ");
}

.tile1, .tile2, .tile3 {
    width:40px;
    height:40px;
    float:left;
    border: 1px blue solid;
    position: relative;
}
body {
    position:absolute;
    width:100%;
    height:100%;
    margin:0;
    color:white;
    font-family: Arial;
}
#container {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background:#FFF;
    overflow:hidden;
}

JavaScript

for (var i = 1; i < 500; i++) {

    //if i is divisible by 3 
    if (i % 3 == 0) {
        $('#container').append('<div class="tile3">' + i + '</div>');

    //if i is divisible by 4 
    } else if (i % 4 == 0) {
        $('#container').append('<div class="tile2">' + i + '</div>');

    //the rest..
    } else {
        $('#container').append('<div class="tile1">' + i + '</div>');

    }
}