html Format de tableau style Pinterest

CandyShop

Membre
Salut, je suis inscris depuis quelques jours mais c'est mon premier message,

Je voudrais faire une page d'accueil comme Pinterest Pinterest avec des blocs qui ne sont pas alignés horizontalement. Mais c'est un enfer à faire !
Si un bloc est plus grand que celui sur sa droite par exemple alors il y a un espace blanc sous le plus petit.

J'ai essayé avec Gridlayout ou cssGrid mais je me plante lamentablement à chaque fois.
Même avec le display flex c'est sans fin car une propriété vaut pour un bloc de la ligne mais ne convient pas au suivant :eek:
Si vous avez une solution ça m'enlèverait une belle épine du panard !!

✌️
 
  Solution
Tu raisonnes en terme de lignes
Capture d’écran 2021-01-08 132931.png

alors que tu devrais raisonner en terme de colonnes.
Un conteneur flex avec un flex-direction: row; et à l'intérieur des conteneurs colonnes flex-direction: column;
Capture d’écran 2021-01-08 133237.png

A+

CandyShop

Membre
J'ai essayé des conteneurs flex pour positionner tous les éléments vers le haut mais comment coller ceux de la ligne suivante vers le haut sachant que l'espace entre chaque bloc sur leur ligne n'est pas le même
CSS
.container {
    display: flex;
    align-items: start;
}
 

Nicolas

Membre actif
Bien vu Cascadeur

HTML
<div class="cont-flex">
  <div class="col-flex">
    <div class="pin1"></div>
    <div class="pin2"></div>
    <div class="pin3"></div>
    <div class="pin4"></div>
  </div>
  <div class="col-flex">
    <div class="pin2"></div>
    <div class="pin3"></div>
    <div class="pin4"></div>
    <div class="pin1"></div>
  </div>
  <div class="col-flex">
    <div class="pin3"></div>
    <div class="pin1"></div>
    <div class="pin4"></div>
    <div class="pin2"></div>
  </div>
</div>
CSS
.cont-flex {
  display: flex;
  flex-direction: row;
}

.col-flex {
  padding: 5px;
  display: flex;
  flex-direction: column;
}

.pin1 {
  border-radius: 5px;
  margin-bottom: 5px;
  min-width: 100px;
  min-height: 200px;
  background: red;
}

.pin2 {
  border-radius: 5px;
  margin-bottom: 5px;
  min-width: 100px;
  min-height: 180px;
  background: blue;
}

.pin3 {
  border-radius: 5px;
  margin-bottom: 5px;
  min-width: 100px;
  min-height: 110px;
  background: green;
}

.pin4 {
  border-radius: 5px;
  margin-bottom: 5px;
  min-width: 100px;
  min-height: 150px;
  background: orange;
}
 
Dernière édition:

CandyShop

Membre
D'accord ! c'est pas si compliqué en fait, je m'imaginais un truc impossible avec du code partout.
Bon et bien je m'y mets tout de suite, merci à vous 3.

Par contre est-ce que je suis obligé d'utiliser des min-height pour chaque pin ? Comment les calculer s'il les faut ? Ciao !
 

DaCode

Membre
Est-ce que l'on pourrait imaginer ne scroller qu'une colonne par une colonne, c'est à dire qu'elle soit indépendante ?
Je suppose en appliquant un max-height au col-flex et si le contenu dépasse cette "hauteur" alors des barres de scroll apparaitront.
Tu peux en plus les personnaliser pour les rendre plus discrètes avec ce type de code
CSS
::-webkit-scrollbar {
    width: 12px;
    height: 5px;
    background-color:rgb(49, 49, 70);
}
::-webkit-scrollbar-track {background-color: rgb(49, 49, 70);}
::-webkit-scrollbar-thumb {background-color: rgb(22, 22, 42);}
 

mikadox

Membre
Pas mal oui mais j'aimerais bien comprendre toute la partie javascript.

Il y a un paquet de code par rapport à ce que propose Nicolas et je serais curieux de voir ce qu'il apporte en plus. Bon je suppose le côté responsif mais avec quelques media queries on arrive au même résultat avec du HTML/CSS pur.
Autre chose, pourquoi peut-on dire que c'est du Bootstrap ? Si tu me le dis pas je le reconnais pas... Sinon si white-panel c'est du pré-configuré ?
Et pourquoi autant de JS quand on utilise un framework ?

Je suis un peu frustré de ne pas comprendre JS.
 

Naruto

Membre
Pas vraiment utile de proposer un exemple totalement obsolète datant de près de 5 ans :p
En regardant le code, ok on voit les appels aux CDN dans le fichier HTML
HTML
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

Mais je n'arrive pas non plus à voir où sont les blocs BS dans le reste du code.
C'est surtout du JS le bazar, tout est fait dans le fichier JS et comme vous je ne suis pas très fort en JavaScript mais cette première ligne de fonction m'étonne :unsure:
JavaScript
;(function ($, window, document, undefined) {
 

LaPomme

Membre
Je suppose en appliquant un max-height au col-flex et si le contenu dépasse cette "hauteur" alors des barres de scroll apparaitront.
Tu peux en plus les personnaliser pour les rendre plus discrètes avec ce type de code
Merci DaCode ça marche parfaitement et le code pour styliser les scroll-bar ça rend super bien.

Juste un détail, comment faire pour que la colonne scroll au lieu que ce soit la page entière qui scrolle quand on survole une colonne ? Actuellement il faut cliquer dans la colonne pour l'activer en quelque sorte...
 

Ces discussions pourraient vous intéresser...

  • Résolue
Salut, J'ai une erreur PHP que je n'arrive pas à résoudre, voici le code simplifié <!DOCTYPE html> <html> <head> <title>Cours PHP & MySQL</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body>...
  • Résolue
Bonjour à toutes et à tous, Dans la lignée des exercices PHP X, je vous propose aujourd'hui un exercice JavaScript ! Il est très simple et ne nécessite qu'une seule fonction. C'est une ligne de code que l'on doit trouver, elle doit être capable de fusionner 2 tableaux...
Salut les gars ! J'ai vu que certains se sont bien amusés avec PHP pour censurer un texte, comme je suis en plein apprentissage de Python (enfin je m'amuse un peu) j'ai voulu créer un petit code qui permet de faire la même chose. Alors c'est à peu près la même syntaxe ...
Haut