11496 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Pour un wordpress, j'ai choisi un thème mosaïque :
http://demo.alienwp.com/cell/

Puis je l'ai entièrement modifié mais le principe reste le même, j'utilise masonry pour obtenir l'effet mosaïque (les blocs remontent en cas d'espace au dessus).

Le problème c'est que je n'arrive pas à obtenir l'effet recherché.
Sur toutes les pages de mon site qui appellent une liste d'entrées (aperçu d'articles avec image), je voudrais obtenir une mosaïque qui n'est pas une grille, chaque entrée ayant une largeur et hauteur sensiblement différentes.

Est-il possible d'obtenir cet effet en javascript (jquery, ou masonry) ?

Je veux m'approcher de ça :
http://imageshack.com/a/img89/9796/heao.jpg http://imageshack.com/a/img593/3266/97mp.jpg
ou ça pour être plus schématique :
http://imageshack.com/a/img401/1479/7ty0.jpg

Plutôt que ça :
http://imageshack.com/a/img513/1091/ffik.jpg

Merci beaucoup.
Modifié par Doubrovski (17 Feb 2014 - 15:37)
Pas d'idée ?

J'ai réfléchis à la manière dont ça peut être mis en oeuvre :
Je voudrais que les dimensions des blocs soient aléatoires, mais dans une fourchette de dimensions autorisées.

L'idéal serait d'ajouter une class css aux div en fonction de si l'image est verticale ou horizontale (je sais faire). Puis de générer aléatoirement la largeur des divs dans une fourchette de pourcentages autorisés (ça je sais pas faire... j'ai l'impression que c'est faisable en javascript).

Par exemple, le div a la class="vertical"-> la largeur du div est calculée aléatoirement entre 10 et 33% de la page.

Ensuite il faut organiser toutes les div sur la page. Masonry peut surement organiser des blocs de tailles différentes. Mais ça serait encore mieux de trouver un système qui organise les blocs à partir du centre de la page.

-
Edité par Doubrovski il y a une minute