Vous vous demandez si quelqu'un a une solution pour cela.
Je voudrais présenter une archive d'images miniatures les plus anciennes en bas et les plus récentes en haut. J'aimerais aussi que le flux lui-même soit inversé ... quelque chose comme ça:
La page doit être alignée à droite, avec de futures images ajoutées en haut de la page. Je crée la page dynamiquement avec PHP en tirant les noms de fichiers d'image d'une base de données MySQL. Le hic ici est que j'aimerais que cette mise en page soit fluide, ce qui signifie que la plupart des astuces PHP pour compter les images et construire le HTML en conséquence sortent par la fenêtre.
Existe-t-il un moyen de le faire avec Javascript ou même simplement CSS?
3 réponses
Voir: http://jsfiddle.net/thirtydot/pft6p/
Cela utilise float: right pour commander les div s comme requis, puis transform: scaleY(-1) retourne le conteneur entier, et enfin transform: scaleY(-1) à nouveau retourne chaque image individuelle.
Il fonctionnera dans IE9 et supérieur et tous les navigateurs modernes.
CSS:
#container, #container > div {
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-ms-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
}
#container {
background: #ccc;
overflow: hidden;
}
#container > div {
float: right;
width: 100px;
height: 150px;
border: 1px solid red;
margin: 15px;
font-size: 48px;
line-height: 150px;
text-align: center;
background: #fff;
}
HTML:
<div id="container">
<div>1</div>
<div>2</div>
<div>3</div>
..
</div>
Le module CSS Flexible Box a été conçu pour ce type de chose. Voir un exemple rapide que j'ai concocté: http://jsfiddle.net/c6QLC/2/ (regardez à cela dans Firefox)
Maintenant, la mauvaise nouvelle: vous ne pouvez pas encore vraiment vous y fier. Non seulement la spécification est en cours de réécriture, mais l'implémentation actuelle ne prend pas en charge box-lines (que j'ai inclus dans l'exemple), ce qui permettrait aux éléments d'être sur plusieurs lignes au lieu d'être débordés.
La nouvelle spécification est en cours d'écriture dans les versions de développement de certains navigateurs, donc cela se produira. C'est juste une question de temps.
En attendant, quelque chose comme Isotope pourrait peut-être répondre à vos besoins.
Si vous souhaitez consulter les spécifications, vous pouvez les trouver ici: http: //www.w3 .org / TR / css3-flexbox /
Cela peut être résolu avec le plugin de maçonnerie jquery. C'est un peu comme un isotope mais gratuit pour les utilisateurs privés et commerciaux.