Comment implémenter un algorithme de disposition de blocs sans gapless?

J'essaye d'afficher des images dans une disposition de grille qui est de 4 unités de large par un nombre arbitraire d'unités élevées. Chaque image de la grille peut être une unité 1x1, 1x2, 2x1 ou 2x2. J'utilise également la maçonnerie jQuery pour essayer d'éliminer certaines lacunes dans la mise en page.Comment implémenter un algorithme de disposition de blocs sans gapless?

La taille d'une image affichée à (1x1, 2x2, etc.) est une taille "préférée" en fonction de ses dimensions.

Je pense que la façon la plus simple d'éliminer les lacunes dans la mise en page serait d'afficher certaines images dans la mise en page à des tailles autres que leur taille préférée. Comment puis-je faire cela de manière algorithmique, en conservant le plus grand nombre de photos qui sont affichées à leur taille préférée, tout en remplaçant ceux qui sont jugés nécessaires pour une mise en page sans gapless.

Un exemple visuel; Je veux tourner ceci:

enter image description here

en quelque chose comme ce qu'ils ont sur ce site: http://500px.com/

Source

2012-07-01 Jake Petroules

Copie possible de http://stackoverflow.com/questions/5626520/fitting-n-varible-height-images-into-3-similar-length-column-layout – miqbal

Juste un début: Je pense que cela est une instance de bin packing qui est NP-complete dans le cas général (voir this pdf). Peut-être utile de commencer à chercher des choses dans ces termes ... ce n'est pas une réponse complète par tous les moyens.

Source

2012-07-01 00:52:05 Claudiu

La chose la plus simple que vous pouvez faire est de grouper des paires de 1x2 ensemble, des paires de 2x1 ensemble, et des quadruples de 1x1 ensemble. Disposer beaucoup de 2x2 est alors facile, et seules les images impaires devront être redimensionnées. Ceci (ou quelque chose comme ça) est presque certainement ce que 500px.com fait.

Je soupçonne que cette solution ne correspond pas vraiment à votre restriction de gauche à droite, de haut en bas. Mais je ne suis pas sûr de ce que cette restriction signifie exactement. Peut-être que si vous pouviez préciser ce que cela signifie, nous pourrions vous aider à mieux.

Source

2012-07-01 04:59:59

De gauche à droite, de haut en bas Je viens juste signifiait un flux de texte normal. Je suppose que ce n'est pas vraiment nécessaire de le dire. –

Vous pouvez appliquer ma réponse acceptée à la question liée here, puis modifier la taille des images adjacentes aux espaces pour les remplir si possible.

Source

2012-07-01 07:47:18 Paddy3118

Comment implémenter un algorithme de disposition de blocs sans gapless?

Répondre

Questions connexes