Un petit problème de matheux, ou d'amateur de casse tête

[caviar]

Salut tout le monde ...
Bon j'ai un problème de matheux ... et je n'arrive pas à trouver l'algo...ou comment faire
j'utilise la librairie jquery

voila, en simplifiant la problématique ça donne ça
j'ai une div.imagecollection de 800px de large dans laquelle je peux faire apparaitre des images (avec un append)
chaque image qui apparait peut avoir une largeur et une hauteur différente.
certaines sont horizontales, d'autres verticales etc ...

bon j'aimerai qu'à chaque nouvelle image chargée, toutes les tailles des images soient recalculées de façon à ce qu'elles aient toutes la même hauteur et qu'elles occupent la largeur maximale disponible dans mes 800px (sachant qu'en plus on a 5px de marge à droite pour chaque image)

vous voyez le truc de dingue ... alors j'essaye de calculer de ratios et tout ça mais je trouve pas la logique ...

si vous avez un pote prof de math ... lol
thanks

@++

 

[spout]

Ceci pourrais p-e t'aider: http://masonry.desandro.com/

 

[caviar]

salut
merci, c'est sympa cet effet mais ça ne colle pas du tout avec ma problématique malheureusement ...
c'est complexe en fait ... je m'arrache les cheveux avec des dessins et tout là ... la galère ... ou bien je suis nul en maths... ce qui est possible aussi

 

[caviar]

Pour vous donner une idée j'en suis là mais ça marche pas

 //resize les image dans un bloc images
 function sizeImgBlock (imagescolection) {
		imgs = $(imagescolection).find('img');
 		nbimg = $(imgs).length;
		
 		trace(imgs);
 		trace(nbimg);
 			
 		trace('maxw=' + maxw); //largeur  de ma div containeur
 		trace('maxh=' + maxh); //hauteur de ma div containeur

 		maxratio = 0;
			
 		$.each(imgs, function (index, value) {
		
			//on cherche l'image la plus large		
			w = parseInt($(this).width());
			h = parseInt($(this).height());
			
			
			ratioh = h/w; //la hauteur = x fois la largeur
			
			
			if ( ratioh > maxratio ) {
				maxratio = ratioh;
				trace ('ratioh='+ratioh);
				trace ($(this).attr('id')+' '+w+' '+h);
				
				//hauteur finale maximale de la div containeur
				hmax = maxw * maxratio ;
				trace ('hmax='+hmax);
				
				wration = maxw / hmax ;
				trace ('wration='+wration);
			}

			
 		});
		
		$.each(imgs, function (index, value) {
					//$(this).css('width', parseInt((maxw / (nbimg)) - (5 * (2 - 1))));
					
					w = parseInt($(this).width());
					h = parseInt($(this).height());
					
				trace ('w='+w);
				trace ('h='+h);
			
				localratio = w / h ; //ratio de mon image
				
				//resize des miages
			
				$(this).css('height', parseInt(hmax / ( localratio)));
				$(this).css('width', '');
			});
		
		
 	//	$(imagescolection).css('height', $(imagescolection).find('img').height());
 }

 

[patapon87]

Tu as un problème dans ce que tu nous dis je pense ou alors il n'y a pas de problèmes de maths....

bon j'aimerai qu'à chaque nouvelle image chargée, toutes les tailles des images soient recalculées de façon à ce qu'elles aient toutes la même hauteur et qu'elles occupent la largeur maximale disponible dans mes 800px

Si tu veux qu'elles aient toute la même hauteur alors que les largeurs sont variables :

- tu calcules la hauteur de la plus grande
- tu mets toutes les images sur cette hauteur
- si les images font plus de 800 de largeur tu calcules pour le réduire le width...

Après si il faut que cela respecte le ratio original c'est différent mais tu ne le dis pas dans ta phrase ;-)

 

[patapon87]

Si tu dois respecter le ratio, à moins que je me trompe tu calcules le ratio à la base en faisant hauteur/largeur, ça te donne une valeur z.

Pour connaitre la taille de ta largeur maxium connaissant ton hmax et ton z tu fais juste hauteurmax/ratio et ça devrait te donner ta largeur maximum en conservant le ratio

 

[caviar]

ouaip, il faut que je conserve le ratio
je vais chercher dans cette voie
thanks
++

 

[caviar]

en fait ça marche pas

tu calcules la hauteur de la plus grande
- tu mets toutes les images sur cette hauteur

Non, car elles ne vont pas occuper forcément la largeur totale du coup

- si les images font plus de 800 de largeur tu calcules pour le réduire le width...
c'est justement ce calcul que je ne trouve pas

:'(

 

[patapon87]

Non mais il faut que tu reprennes ce que tu nous dis parcque ça ne va pas.

tu calcules la hauteur de la plus grande
- tu mets toutes les images sur cette hauteur

Non, car elles ne vont pas occuper forcément la largeur totale du coup

Alors que plus haut tu as dit :

bon j'aimerai qu'à chaque nouvelle image chargée, toutes les tailles des images soient recalculées de façon à ce qu'elles aient toutes la même hauteur

Ca plus le problème de ratio où tu n'es pas clair.... il faut que tu sois d'accord avec toi même avant :wink:

 

[Toma]

Comme l'a bien vu patapon87, il y a clairement une contradiction dans ton cahier des charges :

même hauteur + même largeur (800px) + ration conservé => impossible

Donc il faut que tu enlèves une des trois contraintes pour pouvoir trouver une solution.

 

[patapon87]

Ca revient à vouloir avoir un triange rectangle equilateral : impossible

 

[caviar]

Non, j'ai pas dit même largeur ...
la largeur reste fonction du ratio de chaque image
au final j'ai trouvé la solution si ça peut aider qqun
++ et merci pour les réponses

 //resize les image dans un bloc images
 function sizeImgBlock (imagescolection) {
 
		imgs = $(imagescolection).find('img');
		
		$(imgs).removeAttr('style');
		$(imgs).removeAttr('width');
		$(imgs).removeAttr('height');
		
		
 		nbimg = $(imgs).length;
		
		trace ('-------sizeImgBlock------------');
 		trace(imgs);
 		trace(nbimg);
 		
		maxw = $(imagescolection).width();
 		trace('maxw=' + maxw); //largeur  de ma div containeur
 		
 		grandeHauteur = 0;
 		LargeurTotale = 0;
 		total_ratio = 0;
			
 		$.each(imgs, function (index, value) {
			
			trace ($(this));
			
			src = $(this).attr('src');
			//on cherche l'image la plus large		
			//w = parseInt($(this).width());
			//h = parseInt($(this).height());
			w = getImgWidth(src);
			h = getImgHeight(src);
			
			trace ('w='+w);
			trace ('h='+h);
		
			if (h > grandeHauteur) {
				grandeHauteur = h ;
			}
				
 		});
		
		
		trace ('grandeHauteur='+grandeHauteur);
			
		//j'ai la grande heuteur, je resize les images à cette hauteur pour calculer la largeur totale
		
		$.each(imgs, function (index, value) {
		
			
				
			trace ('--boucle largeur totale--');
			trace ($(this));
			
		
			ih = $(this).height();
			iw = $(this).width();
			trace ('ih='+ih);
			trace ('iw='+iw);
			
			//$(this).width( ($(this).width() * ( ih / grandeHauteur) )  );
			
			ratiolocalh =  ih / grandeHauteur ;
			trace ('ratiolocalh='+ratiolocalh);
			
			trace ('largeur de cette image si agrandie pour avoir la taille de la plus haute');
			largagr = iw / ratiolocalh;
		
			//on resize ;
			$(this).width(largagr);
			$(this).height(grandeHauteur);
			
			trace ( largagr );
			//largeur totale de la bande d'images si elles avaient toutes la hauteur de la plus haute
			LargeurTotale = LargeurTotale + largagr;
			
		});
		
		trace ('LargeurTotale='+LargeurTotale);
	
		//ratio entre la largeur maximale et la largeur totale de la bande d'images
		ratioLargeurs =  maxw / LargeurTotale  ;
		
		trace ('ratioLargeurs='+ratioLargeurs);
		
		//on resize toutes les images en foncion du ratio largeur
		$.each(imgs, function (index, value) {
		
		
			trace ('--boucle resize final--');
			trace ($(this));
			iw = $(this).width() ;			
			ih = $(this).height() ;		
			
			nextw =  iw * ratioLargeurs ;
			nexth =  ih * ratioLargeurs ; //grandeHauteur * ratioLargeurs
			
			trace ('iw='+iw);
			trace ('nextw='+nextw);
			trace ('nexth='+nexth);
		
			$(this).attr(  'width','' ) ;
			$(this).attr(  'height','' ) ;
			//je lève 5 px de marge
			$(this).css('width',  parseInt(nextw) -5 ) ;
			$(this).css('height', parseInt( nexth) -5 ) ;
		
		});
		
	
 		$(imagescolection).css('height', $(imagescolection).find('img').height());
 }