Automatic Image Montage est un plugin JQuery qui permet de générer automatiquement une mosaïque d’images, comme vous pouvez le voir sur l’image suivante :

Il ne s’agit ici que d’une capture d’un morceau de la mosaïque. Mais il est possible d’en générer avec plusieurs dizaines d’images de différentes tailles.

La mise en place, bien qu’un peu longue, est relativement simple.

Voici comment se présente la partie HTML :

<div class="am-container" id="am-container">
    <a href="#"><img src="images/1.jpg" title="Image 1"></img></a>
    <a href="#"><img src="images/2.jpg" title="Image 2"></img></a>
    <a href="#"><img src="images/3.jpg" title="Image 3"></img></a>
...
</div>

Vous l’aurez compris c’est cette partie qui peut vite devenir longue si vous avez beaucoup d’images.

L’utilisation du plugin se fait de cette manière :

$(function() {
				var $container 	= $('#am-container'),
					$imgs		= $container.find('img').hide(),
					totalImgs	= $imgs.length,
					cnt			= 0;
				
				$imgs.each(function(i) {
					var $img	= $(this);
					$('').load(function() {
						++cnt;
						if( cnt === totalImgs ) {
							$imgs.show();
							$container.montage({
                                                               // début des options
								fillLastRow	: true,
								alternateHeight	: true,
								alternateHeightRange	: {
									min	: 90,
									max	: 240
								}
                                                                // fin des options
							});
						}
					}).attr('src',$img.attr('src'));
				});	
				
			});

Quant aux options, en voici la liste exhaustive

// If you use percentages (or no width at all)
// for the container's width, then set this to true.
// This will set the body's overflow-y to
// 'scroll' (fix for the scrollbar's width problem)
liquid					: true, 

// Space between images in pixels
margin					: 1,	

// The minimum width that a picture should have
minw					: 70,	

// The minimum height that a picture should have
minh					: 20,	

// The maximum height that a picture should have
maxh					: 250,	

// Alternate the height value for every row.
// If true this has priority over defaults.fixedHeight
alternateHeight			: false,
// The height will be a random value between 'min' and 'max':
alternateHeightRange	: {
	min	: 100,
	max	: 300
},

// If the following value is set, this will
// have priority over defaults.minsize.
// All images will have this height:
fixedHeight				: null,	

// Setting this value will make minw, minh irrelevant.
// Chosen height will be the one of the smallest image
// when this is set to true:
minsize					: false,

// If true, there will be no gap in the end
// of the container. The last image will
// fill any white space left:
fillLastRow				: false

Il existe sûrement d’autres plugins plus simples d’utilisation qui font la même chose, mais celui-là est très paramétrable. C’est pour cela que j’ai choisi de vous le présenter.

Exemple : Démo ou Téléchargement