Forum d'entraide PHPFrance

Bonsoir à tous,

J'essaye vainement de trouver des infos afin de réaliser un rendu de ce type : http://showmepictures.tumblr.com/archive (descendre un peu pour voir un mois avec assez de photos et éventuellement redimensionner la fenêtre pour laisser moins de place horizontale...)
Donc en gros je voudrais organiser des images, quelque soit leurs tailles afin qu'elles prennent le moins d'espace possible, et qu'il n'y est pas un alignement trop stricte.
Mais aucune idée de comment faire, j'ai essayé uniquement en css, avec du float:left, du display:inline, etc... je n'arrive pas à mes fins

Donc si l'un d'entre vous à déjà réalisé ceci, ou connais un script js/jquery capable de faire ça? ou même les termes en anglais qui me permettrais d'obtenir de meilleurs résultats sur google...
Merci d'avance!!!

D'après le DOM, ils sont positionnés en absolute, avec des valeurs en x et y. Ce serait donc pas du CSS qui le gérerait. Mais l'algorithme ... no sé !

Hmmm ... Si.

Il doit les disposer en les traitant verticalement, et non horizontalement, comme on le ferait avec du CSS.

Et lors de l'évenement window.resize, il ne fait que réappliquer le rendu. J'ai peut-être tout faux, mais si tu fais un redimensionnement de la fenêtre tu verras les éléments qui changent totalement de place. C'est vraiment pas CSS ^^

PS :

Soit x images de hauteur y et toutes largeur l.
Soit la largeur du navigateur z,
combien on peut en mettre sur une ligne : n = z/(l+10)
soit t la hauteur totale des images (foreach img, t += y), t/n pourrait nous donner la hauteur maximale d'une colonne.

Foreach img
{
Si hauteur disponible colonne - hauteur image > 0, alors on la rajoute
Sinon, on passe à la colonne suivante
}

Enfin, voilà, en 5 minutes, comment je vois la première approche.

Ah tu soulèves un point intéressant auquel je n'avais pas vraiment fait attention, visiblement toutes les miniatures ont la même largeur...
c'est pas top pour moi ça :/ du coup la seule solution que je vois effectivement c'est du javascript, mais ça me parait compliqué.
Sur chaque élément le javascript à l'air de modifier tout ça:

element.style {
height: 100px;
left: 655px;
top: 869px;
position: absolute;
}

Bon c'est pas dit que je me lance dans un pareil truc moi :/
Mais pourtant j'ai une vague impression que j'ai déjà vu un script jquery/prototype ou autre qui faisait ce genre de chose (disposition optimisée d'éléments de taille différente)
Grrrrr

Salut ::

Donc un mot :: GANTT

Je l'ai mis en place dans ma boite pour une apli SAS (donc je ne peux te filer le code )

Pour te motiver, j'ai mis 4 h à le concevoir (tableau blanc ^^) puis 20min à le coder ... pour 2 h de débugg et réglages ...


Donc, si tu souhaites en développer un je peux te donner un coup de main. sinon, en cherchant sur le net tu devrais en trouver qui pourrait te mettre sur la voie.

++

Bonjour,

Merci pour ta réponse!
Je ne comprend pas trop ce que vient faire Gant la dedans? Pourrais-tu m'expliquer un poil plus?
Déjà est-ce que c'est Gant ou Gantt ? si c'est gant est-ce que c'est le même que pour les diagrammes de gant?
Parce que je n'arrive pas à saisir en quoi une méthode de gestion de projet va m'aider pour aligner correctement mes photos?

Merci d'avance!

Salut ::

le principe, que je conserve des diagrammes (http://fr.wikipedia.org/wiki/Diagramme_de_Gantt => je l'écris avec 2 T, mais je ne suis pas allé à l'école bien longtemps non plus ^^)

C'est chercher à tetris-ser les éléments pour qu'ils prennent le moins de place possible, ou dans ton cas, les ranger au mieux pour qu'ils rentrent en largeur dnas un environnement défini et prennent le minimum de place sur la hauteur.

=> après peut-être que je ramène ma science pour rien ^^ mais tu auras compris le principe


phase 1 : identifier les éléments et leurs occupations de l'espace. ceci permet de les ordonnés de manières à ne pas se retrouver avec des aberrations au rendu (du style les deux grands l'un au dessus de l'autre et tous les petits à leur droite ...)

phase 2 : placer les éléments par construction de blocs |°°| on sait qu'il serait préférable de placer . et + sous les ° => tu empiles donc tes éléments par lignes successives (et des plus grands au mois grands) en conservant les coordonnés le la ligne inférieur et des vides laissés en route...

phase 3 : placer les éléments, regarder la place vide qu'il reste sur le bord de l'écran et redimensionner toute les images pour les agrandir de (taille_ecran / taille_occupée) ...

Bien évidemment, il faut +/- relancer ça (ou du moins garder le principal et relancer le placement) lorsqu'un utilisateur redimensionne la fenetre, c'est plus propre ^^

Tu vois le principe ?