Div au hasard

**chris241182** · 03/11/2021, 20h11

Tous à tous

J'espère poster ma demande au bon endroit.

J'ai une série de div représentant des photos (class identique). Je souhaiterais que parmi les 20 div listées, seules 10 soient affichées et de manière aléatoire...
Auriez-vous un bout de code pour réaliser cela ?

Un immense merci à ceux qui voudraient bien me consacrer 5 minutes les copains

**Népomucène** · 04/11/2021, 16h27

Bonjour

Peux-tu poster du code et nous dire ce que tu n'arrives pas à faire ?

A première vue, on devrait stocker les images dans un tableau et les choisir au hasard avec l'indice du tableau

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
Random random = new Random();
int numPhoto = random.nextInt(19);
monTableau.get(numPhoto )

**chris241182** · 04/11/2021, 19h01

Merci beaucoup ta réponse
Voici le code

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
    <head>
      <title>...</title>
      <meta charset="utf-8">
	  <script src="script.js" defer></script>
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	  <style>
          .gallerycard {
        margin: 8px;
        float: left;
        height: 200px;
        width: 150px;
        background-color: rgba(0, 0, 0, .3);
        border-radius: 8px;
}       </style>
    </head>
    <body>
<div class="gallerycard"><a href="https://lacinemathequedubis.blogspot.com/p/george-eastman.html"><img src="https://lh3.googleusercontent.com/mQEc9wyymSQdfi_n2_SfqLNfV58BnyCY4s2xuqxMVSHTpjfhcljT6MRwv60UGaMoJTFJlqSDo2te281X4SYOUhh8_9Sl97GJsi12A0mWu_g4COWHZdoic8-qeHuTed-9F23LjKgPlMdEc8TX78n4VXCkzCnt3TPRbqoq8P2b15FdsByFT45uXZVetFb1Y-G3J9eXq_sKPlb0CuK4ccQ4qBLOTVWnJhTtkovHufb6fDQXweMknd6l1bsDYaMxcJtTJNYV3m6ARHtD2znFWe6sM4RlZYAopdfA5qLb2QwZ8UQSlFUXQblSMGeYKsd9c3iOioYRKfEsFj5rWX8p8VuitzTGGKAXvZxWtYBTdLjqEIO9FKMfRQcSBChCW22NZSs662Pp-6_pGFYx8sJ0rB9FcWev19ZZowqzUGnSWlj5EAohNb84H-rNB45cnKHuaztAGMHuu7n4IHwZNY48SH5v63Gx5wVHpLWuJXd9SNuVZzw9BcpmIGHP4Tetv_sEtewesmVPehOVXj2XKf7iRArh6TJaTNXvTxgEK7Hg_RJ-oZMMv6GIesqd8iQp3ylwGyWXdog0PhmtssBLLmqJZJ6WJzqtqBw7hwBTe25ks4613KoIX0rhlUaoi4TonGIYwNaShJIGxKUpbHfylSTxjNAnGJpOupVto-TBwF58zVfZWm_TC4zBUcvU059qMC3Ay4riTmOGCmljfRAoMOXjgDpKBJRygA=w150-h200-no?authuser=0" alt="George Eastman"/></a></div>
<div class="gallerycard"><a href="https://lacinemathequedubis.blogspot.com/p/laura-gemser.html"><img src="https://lh3.googleusercontent.com/aChzSdpIHeSeTxD2kbLVyhyk4iDftzsxTLFv20i0mnSGArTgWJv4ZbUeDsz2qf0Dv72MPvZ0e6nexfcbPuw108o59VNxWJdx2wBSz4M1rLZceVMVAJaHfolsnEfIwzEvVSG5QVcX3zmekFv2Lmn4gQj7b_xuRAJ9ZFP8gzZUUBdoFG6OsXK5rH-5jjmyUieA-QkPjGe24P22Xo1Ld8h4sdP2eenHAP79En2AwklLYU6bSLJs0fEXodFmhUA3JXPNxCaHcOPUDlAwluOHYzPTw9QQep3FOuracdorFq5CXQzVgyuS4MUe1ugf667UE11tPjzneLr5ijFldn4UViIR4_XgCmYoHeSDtZe5QbLUAJ2XwWeO-cg1nkog9PKDdNmjSp-o9GPtVl_tUE5QRMsX7WL8vxL1qRRYRojk3KY9znWT-fcONQKIz6Bg_2k2X8k00Kd66LKyv1iSzNlNmMzA0FLVfMM6HSq1NPby3TKXmOUgc5hanOj-aYAFtK5rEgW94G1ojfQLeBIS2NnmgHsvjFIVTnQdB8MNrjOJPrsCE1pqnMXb721k3hSli3BoIdemff-bK3cQzkgvFHKOHxha0fCNLue2ErqT1rgWntKmcgmPeEXX36zO5600woczE6zMnIJSWqfq5IlriD_nU6e190XxezIWOKn1mQsZ-k79ZAaOjR39eTawLMuF9_ZMYAwk0DDe0F4kdru__HfmPrIYC3IFyA=s250-k-rw-no" alt="Laura Gemser"/></a></div>
<div class="gallerycard"><a href="https://lacinemathequedubis.blogspot.com/p/franco-nero.html"><img src="https://lh3.googleusercontent.com/k4LHtvOYVHzNArTN5ln6UftHM3THq6RhMRE4xgHZ-GER6RQtKyoDkGqjBcHoSKq3Y3vFoKafEgYV8NPv6U8m9g7euemlAABzZx7Vu66jqGnCPtmLQaUf51jE4hQrkUR2sICudbu7HL8ifo_Y_YZShJbCHYOiUwzpMR9YeC9NPJiu_BBsXaATC1u0paua8klgbr5IctAW_JvTxui8T3EFU8VBW09OuI9Tb4d1erQTsA5jt2qpy4mW9BSh1bzVPvzLxqddAhojbJobCqIXMMsm0BXplJMnC-sgaHqgaOVxSnLTJNfo_sOwoAVU3sQPOlOpJ7Yk_AzPoEntO6fxF6hUohL-rQXvAVCGvYL7LEpijoO4WRx4i5pt9zolAhIGW4b6pOj5QFrHoTyq36M1MbSd_CEEfBZ8Ecs96JjH5CPnDDZuic-skiRb5l9S1QNrXXAOIbq9PaTANYTy13hg9aVQdmIuARBDCEHX_1S9Bl8q3zcCkFFuSPObhqb4cJ93EJhS0bW2lMjQ6n1D4aBqYNtedxhuDFVrGVOaxNx6uoL6_vkMayk82IUafMiUAz873JsNn5xs7BVQs4aPalgyDFMYppfPvrzZbf97DlK6Q3tDIUnHGPUF7gDgRw_1UviCdAiYrPx8CSTazh2BS5a5WdpXJVmf54d3KfA2Z1zUQDVK17BQ6TY6vEx4ivCazdOeb0HHf03aLf7HF8xGKF4HNNyL-qsviQ=s250-k-rw-no" alt="Franco Nero"/></a></div>
   </body>
</html>

et le script en question qui me permet de faire du random (je viens de le trouver)

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
var cards = $(".gallerycard");
for(var i = 0; i < cards.length; i++){
    var target = Math.floor(Math.random() * cards.length -1) + 1;
    var target2 = Math.floor(Math.random() * cards.length -1) +1;
    cards.eq(target).before(cards.eq(target2));
}

Je voudrais juste maintenant faire ça :
1) insérer le script directement dans le code. Je ne sais pas ou l'insérer pour que blogger le prenne.
2) Que si je crée 20 div et que je ne veux que la page n'en affiche que 5, quel est le code à insérer ?

Un grand merci pour l'aide

Div au hasard

JavaScript

Vue hybride

Discussions similaires

Partager

Partager