Comment réaliser cette mosaïque d'image ?

Bonjour !

Je cherche à réaliser une mosaïque constituée de plusieurs images, mais qui ne sont pas alignées. De plus, les images ne doivent pas se recouvrir car elles doivent pouvoir être cliquables sans ambiguïté.

Plutôt que des mots, voici une image pour expliquer le genre de mosaïque que je cherche à réaliser. Chaque zone en vert représentent une image.



Je précise que je ne dois pas forcément obtenir exactement cet affichage, c'est surtout pour vous montrer le type de mosaïque que je cherche à obtenir.

Je sèche quand à la manière d'attaquer pour obtenir ce résultat.

Je pourrais travailler avec du float:left et du padding:10px; sur les images, mais je ne vois pas comment obtenir ce décalage sur l'horizontale.

Je précise que les images changent régulièrement (elles proviennent d'une base de données), je cherche donc une solution souple et non une solution rigide avec des valeurs fixes.

Auriez-vous des pistes, voire l'un ou l'autre article dont vous me conseilleriez la lecture ?

D'avance un tout grand merci !
Modifié par Bouchon (28 Mar 2010 - 11:59)

Bonjour,
Je pense que si j'avais à faire ça, je mettrais plusieurs conteneurs de suite en flottement à gauche. Puis je m'occuperais des marges pour les images à l'intérieur de chacun d'eux. Exemple :

Bonjour,

Quand a moi je mettrait une div qui entoure toute cette mosaique.
Je l'appellerais par exemple div.conteneur_mosaique et lui donnerais un positionnement relatif
Dans cette div je mettrais l'ensemble de mes balises image sous cette forme avec un positionnement absolute :
<img class="imagemosaique1" src="/chemin vers mon image" height="hauteurdemonimage" width="largeurdemonimage" alt="description">

Ca donnerait :

<div class="conteneur_mosaique">
<img class="imagemosaique1" src="/chemin vers mon image" height="hauteurdemonimage" width="largeurdemonimage" alt="description">
<img class="imagemosaique2" src="/chemin vers mon image" height="hauteurdemonimage" width="largeurdemonimage" alt="description">
<img class="imagemosaique3" src="/chemin vers mon image" height="hauteurdemonimage" width="largeurdemonimage" alt="description">
<img class="imagemosaique4" src="/chemin vers mon image" height="hauteurdemonimage" width="largeurdemonimage" alt="description">
<img class="imagemosaique5" src="/chemin vers mon image" height="hauteurdemonimage" width="largeurdemonimage" alt="description">
<img class="imagemosaique6" src="/chemin vers mon image" height="hauteurdemonimage" width="largeurdemonimage" alt="description"><img class="imagemosaique1" src="/chemin vers mon image" height="hauteurdemonimage" width="largeurdemonimage" alt="description">
<img class="imagemosaique7" src="/chemin vers mon image" height="hauteurdemonimage" width="largeurdemonimage" alt="description">
</div>

pour le css :

div.conteneur_mosaique{
height:1000;
width:1000;
/*Tu pourrais mettre une hauteur a 0 et une largeur a 0 mais attention les elements qui suivent dans le flux vont se placer par rapport a cette hauteur et pas par rapport aux images de la mosaique. Elles se baladent sans influencer les autres elements de la pages. C'est du au positionnement absolute des images*/}


img.imagemosaique1{
top:0; 
/*l'image div sera placee dans le coin gauche de la premiere div positionnee en relative qui  contient cette image. Dans notre cas div.conteneur_mosaique*/
left:0;}

img.imagemosaique2{
top:50px; 
left:25px;}

left:0;}

img.imagemosaique3{
top:200px; 
left:70px;}

Sinon si tu ne veux pas le faire grâce à des "colonnes" le plugin jquery masonry fonctionne pas trop mal pour faire ce genre de mise en page (http://desandro.com/resources/jquery-masonry/)