JQuery Plugin – jQuery Masonry

Voici un plugin JQuery original : jQuery Masonry. Je n’ai pas encore réalisé de projet qui utilise ce plugin, mais il me donne déjà quelques idées sympathiques. Alors jQuery Masonry, c’est quoi ? Il me semble que Masonry signifie maçonnerie en anglais, et ce mot décrit parfaitement le comportement de ce plugin.

En effet, on galère souvent à encastrer des blocs flottants (float) dans nos pages web, c’est pas toujours évident, même pour ceux qui maitrisent le css et encore pire si ces blocs arrivent dynamiquement. jQuery Masonry a une solution, qui est de faire ce rangement à votre place.

Voici un exemple obtenu avec jQuery Masonry :

jQuery Masonry

Alors qu’avec des attributs float vous auriez obtenu :

jQuery Masonry CSS

Et voici un exemple de code pour agencer tout ça :

Le javascript :

$('#primary').masonry({
columnWidth: 100,
itemSelector: '.box'
});

Votre html :

<div id="primary" class="wrap">
<div class="box col2">...</div>
<div class="box col1">...</div>
<div class="box col1">...</div>
<div class="box col3">...</div>
<div>
<div class="box col1">...</div>
<div class="box col2">...</div>
<div class="box col3">...</div>
</div>
</div>
<!-- /#primary.wrap -->

Finalement, les développeurs sont un peu des gars du bâtiment, non ? 🙂

La page du plugin : http://desandro.com/resources/jquery-masonry
Exemple de base avec jQuery Masonry : http://desandro.com/demo/masonry/basic.html

Author: Franck Pertegas

Share This Post On

2 Comments

  1. Avec ça, même plus besoin de ciment, juste les bons outils : un navigateur, js, jquery et le plugin 🙂 Une révolution dans le milieu du bâtiment 😀

    Post a Reply

Trackbacks/Pingbacks

  1. jQuery – 20 plugin jQuery à retenir | LudiBlog - [...] Masonry Je vous en parle ici Plugin qui agence les blocs de div de vos site automatiquement. Le [...]
  2. 50 Plugins jQuery pour vos sites web ! | LudiBlog - [...] vous en parle ici Plugin qui agence les blocs de div de vos site automatiquement. Le [...]

Submit a Comment

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *