I need to create a background for my site in the mosaico style of photos. When the page opens, the background of the site is populated by photos, filling in the full width of the window (ie needs to be responsive) and a certain height.
Click here to see an animated sample and a JSFiddle .
I searched some plugins and found this one . It does exactly what I want, however, it does not work with background .
Do you have any suggestions for a plugin? Or how can I create this effect?
EDITED
The structure I have to list the images looks something like this:
<div class="bg-mosaico">
<img src="imagem 1" />
<img src="imagem 2" />
<img src="imagem 3" />
...
</div>
It's simple, so I think a plugin is not necessarily useful, and that I can create a simple function with the same goal. I researched and found this:
var imgMOSAICO = $('.bg-mosaico img');
imgMOSAICO.hide();
imgMOSAICO.each(function() {
$(this).delay( Math.random()*500+500 ).fadeIn();
});
It works, images appear. The problem is that they do not appear one by one, they appear almost all at the same time. And I need them to be fixed, as it has to have an exact amount of images .. and depending on the resolution, they will break line and can not.