(si j'ai post au mauvaise endroit mes sincères excuse )
Bonjour je souhaite réaliser une "grid" masonry avec un bouton pour afficher de nouveaux éléments comme expliquer ici.

Je débute encore, et cela ne fonctionne pas chez moi... Malgré de longue recherche...

Mon 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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE HTML>
<html>
<head>
    <!--Include JQuery-->
    <script src="js/jquery_3.1.1.min.js"></script>
    <!--Include js file to Masonry-->
    <script src="js/masonry.pkgd.min.js"></script>
    <!--Include CSS-->
        <style type="text/css">
            * { box-sizing: border-box; }
            body { font-family: sans-serif; }
            /* ---- grid ---- */
            .grid {
                background: #EEE;
                /*max-width: 1200px;*/
            }
            /* clearfix */
            .grid:after {
                content: '';
                display: block;
                clear: both;
            }
            /* ---- grid-item ---- */
            .grid-item {
                width: 160px;
                height: 120px;
                float: left;
                background: #D26;
                border: 2px solid #333;
                border-color: hsla(0, 0%, 0%, 0.5);
                border-radius: 5px;
            }
 
            .grid-item--width2 { width: 320px; }
            .grid-item--width3 { width: 480px; }
            .grid-item--width4 { width: 640px; }
 
            .grid-item--height2 { height: 200px; }
            .grid-item--height3 { height: 260px; }
            .grid-item--height4 { height: 360px; }
 
            button {
                font-size: 20px;
            }
        </style>
</head>
 
<body>
 
<!--Init Masonry-->
<!--Init html : <div class="grid js-masonry" data-masonry-options='{ "itemSelector": ".grid-item", "columnWidth": 200 }'>-->
<script>
    // $('.grid').masonry({
    $grid.masonry( 'appended', elements )({ //just for Appended
            // options
        itemSelector: '.grid-item',
        columnWidth: 100
    });
</script>
<!--Appended-->
<script>
    $('.append-button').on( 'click', function() {
        // create new item elements
        var $items = $('<div class="grid-item">...</div>');
        // append items to grid
        $grid.append( $items )
            // add and lay out newly appended items
            .masonry( 'appended', $items );
    });
</script>
<h1>Titre</h1>
 
<div class="grid js-masonry div_center2">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
</div>
 
<button class="append-button">New items</button>
 
</body>
</html>

Merci d'avance pour toute l'aide que vous pourrez m'apportez. Bonne soirée!