Génération et division de la grille avec css / js / php

Je travaille sur un projet Web, et je pense à la meilleure approche du scénario suivant:

J'ai une foule d'images dans une base de données et je veux la charger dans une grille. Les images de haut rang doivent avoir une toile plus grande, tandis que les classiques inférieurs / non classés ne le font pas. La taille des images n'est pas standard, donc il peut s'agir d'un portrait ou d'une image de paysage avec différentes tailles. Le rapport d'aspect doit rester intact et la fenêtre doit être entièrement remplie horizontalement (avec une largeur de 100%). Les utilisateurs peuvent se déplacer verticalement.

Pour vous donner une idée de la division des champs dans la grille, j'ai attaché un wireframe rapide. Division de la grille

Avez-vous une idée sur comment aborder ce meilleur? Je pensais peut-être que je devrais "standardiser" quelques lignes. Et placez les lignes de manière aléatoire afin qu'elles ne soient pas pré-réglées. Mais ce n'est évidemment pas vraiment calculé. Des pensées sont appréciées!

Fini l'utilisation de la maçonnerie http://masonry.desandro.com/

Je définis la largeur de chaque colonne individuelle en divisant la fenêtre.width par 5.

Si cette grille fonctionne pour vous http://css-tricks.com/13372-seamless-responsive-photo-grid/, vous pouvez rechercher un algorithme 1d bin-packing. Cet algorithme regroupe l'écran dans des bacs verticaux de même largeur. Ensuite, il examine votre collection pour le premier ajustement, le meilleur ajustement, le prochain ajustement ou le pire. Vous pouvez combiner chaque méthode avec un ordre aléatoire, un ordre décroissant ou un ordre croissant. C'est un problème très difficile à résoudre, peut-être que vous voulez essayer une solution de force brute?