Bonjour à tout le monde,

je développe un portfolio dans un wordpress, et pour la mise en page je voulais quelque chose à la Pinterest. Une mur de tuile en fait.

J'ai donc testé ce plugin jQuery. http://www.wookmark.com/jquery-plugin

Il fonctionne bien mais quelques dysfonctionnement apparaissent sans raison (je dis sans raisons car aléatoirement).

Le premier :

J'ai souvent des "tuiles" qui se chevauchent (comme dans l'image ci dessous), je ne sais pas pour quelle raison, surtout que quand je scroll vers le bas, je recharge d'autres tuile et alors tout rentre dans l'ordre.

Pièce jointe 139235

Le deuxième interviens quand j'arrive en bas de page, et qu'il n'y a plus de "tuile" à charger.

J'ai mon hypothèse. Le bloc "#main-tiles" qui enveloppe toutes mes "tuiles" prendre sa valeur Height avec le position et la longueur de la dernière "tuile". mais si une des tuiles précédente est trés longue et dépasse la fin de la "dernière" tuile, alors celle ci dépasse et est coupée par mon footer =(

Je vous laisse le code si besoin est :

Le JS
Code : 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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
jQuery(document).ready(function() {
 
    var random = function(maxInt) {
        var r = (Math.random() * 10) + 1;
        r = Math.ceil(r / (10 / maxInt));
        if (r > maxInt) return maxInt;
        else return r;
    };
 
    var colorizeTile = function() {
        $("#tiles li").each(function(i) {
            $(this).addClass("tilecolor" + random(10));
        })
    };
 
    var $tiles = jQuery('#tiles'),
        $handler = jQuery('li', $tiles),
        offset = 10,
        tilesLoading = false;
 
    // Layout Options.
    var options = {
        align: 'right',
        autoResize: true,
        comparator: null,
        container: jQuery('#main-tiles'),
        ignoreInactiveItems: true,
        itemWidth: 0,
        fillEmptySpace: false,
        flexibleWidth: 0,
        direction: undefined,
        offset: 5,
        onLayoutChanged: undefined,
        outerOffset: 0,
        resizeDelay: 50
    };
 
    /**
     * Reinitializes the wookmark handler after all images have loaded
     */
    function applyLayout() {
        if ($handler.wookmarkInstance) {
            $handler.wookmarkInstance.clear();
        }
 
        // Create a new layout handler.
        $handler = jQuery('li', $tiles);
        $handler.wookmark(options);
    }
 
    /**
     * When scrolled all the way to the bottom, add more tiles.
     * @param event
     */
    function onScroll(event) {
        // Check if we're within 100 pixels of the bottom edge of the broser window.
        var winHeight = window.innerHeight ? window.innerHeight : jQuery(window).height(); // iphone fix
        var closeToBottom = (jQuery(window).scrollTop() + winHeight > jQuery(document).height() - 400);
 
        if (closeToBottom) {
            loadTiles();
        }
    };
 
    /**
     * Function qui charge les 5 prochaines tiles (5 plus ancienne par rapport à celle anciennement chargée)
     */
    function loadTiles() {
        if (tilesLoading) return;
 
        tilesLoading = true;
        jQuery("#loader").css("display", "block");
        jQuery.ajax({
            url: 'http://network.allthecontent.com//wp-admin/admin-ajax.php',
            data: {
                'action': 'get_tiles',
                'size': 5,
                'offset': offset,
                'cp_id': cp_id
            },
            dataType: 'JSON',
            success: function(data) {
                if (data.length == 0) {
                    jQuery(window).unbind('scroll.wookmark', onScroll);
                    //                    jQuery("#noMoreTiles").css("display", "block").fadeOut(2000).delay(800);
                } else {
                    for (var i = 0; i < data.length; i++) {
                        jQuery("#tiles").append('<li class="img-wrap" tileId="' + data[i].ID + '">' + data[i].post_content + '</li>');
                    }
                    applyLayout();
                    colorizeTile();
                    offset = offset + data.length;
                }
                tilesLoading = false;
                jQuery("#loader").css("display", "none");
            },
            error: function(errorThrown) {
                console.log(errorThrown);
                tilesLoading = false;
            }
        });
    }
 
    // Capture scroll event.
    jQuery(window).bind('scroll.wookmark', onScroll);
 
    // Call the layout function.
    handler = jQuery('#tiles li');
    handler.wookmark(options);
 
    /*    jQuery('#json_click_handler').click(function() {
        doAjaxRequestOffset();
    });
*/
 
    colorizeTile();
});
et la structure HTML type :

Code : 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
<div id="main-tiles" style="height: 1998px;">
      <ul id="tiles">
              <li class="img-wrap tilecolor5 tilecolor10" style="display: list-item; position: absolute; top: 0px; left: 0px;">
                <img class="tile_image" src="http://network.allthecontent.com/wp-content/uploads/2013/12/open-uri20131125-22362-1c3ftbr_article.jpeg">
                  <h2 class="tile_title">titre de la tuile</h2>
                  <div class="tile_description">extrait article de la tuile</div> 
              </li>
              ...
               :
               : //le autres tuiles..
               :
              ...
              <li class="img-wrap tilecolor5 tilecolor10" style="display: list-item; position: absolute; top: 0px; left: 0px;">
                <img class="tile_image" src="http://network.allthecontent.com/wp-content/uploads/2013/12/open-uri20131125-22362-1c3ftbr_article.jpeg">
                  <h2 class="tile_title">titre de la tuile</h2>
                  <div class="tile_description">extrait article de la tuile</div> 
              </li>
      </ul>     
</div>
Si des personnes qui connaissent plus ou moins le plugin, ou des comportement de chevauchement comme je rencontre... Je veux bien des pistes ^^