Masonry, Appended ne fonctionne pas

**Hadock** · 03/11/2016, 16h42

(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!

**NoSmoking** · 05/11/2016, 11h40

Bonjour,
pour commencer il te faut regarder du coté de la

Qu'est-ce que la notion de Ready ?
dans un deuxième temps si tu souhaites que cela fonctionne il te faudra au minimum écrire

Code :

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

1
2
3
4
var $grid = $('.grid').masonry({  // récupération de la référence $grid pour utilisation postérieure
    itemSelector: '.grid-item',
    columnWidth: 100
  });

**Hadock** · 06/11/2016, 11h03

Alors je ne sait pas si j'ai bien compris

:

en gros il faut que je vérifie que Masonry soit bien lancé avant de charger les éléments?

Comme ceci? :

Code javascript :

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

1
2
3
4
5
6
7
 
jQuery(function($){
    var $grid = $('.grid').masonry({
    itemSelector: '.grid-item',
    columnWidth: 100
  });
})

Je pense que je vais tous reprendre depuis le début avec js & co

**NoSmoking** · 07/11/2016, 18h34

Comme ceci?

Par exemple mais sans oublier de mettre le reste de ton code dedans également.

**Hadock** · 08/11/2016, 12h30

Ok merci

J'ai également un autre soucie mais je ne sait pas si je peux l'expliquer dans ce post...

Les "articles" de ma page d’accueil ne se "rangent" pas comme il faut; en fait je dois actualiser la page pour que tous reviennent au normal... J'ai lu que certain rencontré se soucie à cause d'un "height: auto;" mais je n'en ai pas....

Mon code js est le suivant (fichier main_old.js):

Code javascript :

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
jQuery(function($){
    var porfolio = $('#porfolio');
    porfolio.masonry({
        isAnimated: true,
        itemSelector:'.grid-item:not(.hidden)',
        columnWidth: 100,
        isFitWidth: true,
    });
 
    $('li ul li a').click(function(e){
        var cls = $(this).attr('href').replace('#','');
        porfolio.find('.hidden').fadeIn();
        porfolio.find('.grid-item').removeClass('hidden');
        porfolio.find('.grid-item:not(.'+cls+')').addClass('hidden').fadeOut();
        porfolio.masonry('reloadItems');
        porfolio.masonry('layout');
        location.hash = cls;
        e.preventDefault();
    });
 
    if(location.hash !=''){
        $('a[href="'+location.hash+'"]').trigger('click');
    }
 
});

et le php (index.php):

Code php :

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
<!--BODY_START-->
<div class="div_body grid js-masonry col-lg-12 col-md-12 col-sm-12" id="porfolio">
    <?php
    $result1 = $bdd->query('SELECT a.id_categorie, a.titre, a.image, a.id, a.datetime, b.couleur
FROM CONTENU a
INNER JOIN CATEGORIES b
ON a.id_categorie= b.id
ORDER BY id DESC');
    while($affiche = $result1->fetch())
    {echo '
    <div class="thumbnail_perso grid-item col-lg-2 col-md-2 col-sm-2 '.$affiche['id_categorie'].' bo art_active" style="margin: 5px 5px 5px 5px auto;">
        <a title="'.$affiche['titre'].'" href="'.OptimiseUrl($affiche['titre']).'-'.$affiche['id'].'.php">
            <div class="block_nobottom div_active">
                <div class="cat'.$affiche['id_categorie'].' linkborder tutoriel_spacer"></div>
                <img class="article_img tutoriel_category" src="'.$affiche['image'].'" alt="image de '.$affiche['titre'].'">
            </div>
            <div class="block div_active">
                <h3 class="article_text">
                    '.$affiche['titre'].'
                </h3>
                <div class="space"></div>
                <p class="article_time">
                    '.$affiche['datetime'].'
                </p>
            </div></a>
    </div>
';}?>
</div>
<!--BODY_END-->
<!--SCRIPT_START-->
<?php include('script_head.php');?>
<script src="js/main_old.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<!--SCRIPT_END-->

dans script_head il y a :

Code javascript :

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

1
2
3
4
5
6
<script
    src="http://code.jquery.com/jquery-3.1.1.min.js"
    integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
    crossorigin="anonymous"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap/js/npm.js"></script>

Masonry, Appended ne fonctionne pas

jQuery

Discussions similaires

Partager

Partager