Créez facilement une disposition de grille dynamique avec FreeWall

Si vous connaissez Windows 8 ou Pinterest, vous connaissez la disposition dynamique de la grille. Une grille dynamique est une mise en page dans laquelle vous pouvez réorganiser et repositionner les éléments enfants selon les besoins ou lorsque votre navigateur est redimensionné. Un plugin jQuery populaire utilisé pour créer cette mise en page est jQuery Masonry mais si vous voulez plus d'options et même une animation, consultez FreeWall.

FreeWall est un plugin jQuery gratuit de Minh Nguyen que vous pouvez utiliser pour créer de nombreux types de disposition de grille : mise en page flexible, mise en page de style métro, grilles imbriquées, mise en page d'image et grille fluide. Il a également un support pour la conception réactive afin que vous puissiez afficher votre site sur un ordinateur de bureau, mobile ou tablette.

En plus de cela, il a également de très jolies animations CSS et des événements de rappel comme onGapFound, onComplete, onResize et onSetBlock.

Commencer

Pour commencer avec FreeWall, vous devez inclure le framework jQuery ou Zepto. Dans ce guide de base, nous allons utiliser jQuery comme exemple pour faire une démonstration de disposition de grille normale.

Maintenant, incluons d'abord le framework jQuery ainsi que le plugin FreeWall avec le code suivant.

Nous allons afficher quelques pièces de brique pour le conteneur de la mise en page.

Grille normale 

Et définissons nos tailles de briques avec les valeurs de width et de height de 320px utilisant la règle de style ci-dessous:

 .size320 {largeur: 320px; hauteur: 320px; } 

Maintenant, pour ajouter du code javascript.

Fais-le fonctionner

Pour donner des couleurs aléatoires aux briques, nous allons définir des tableaux de couleurs et les appliquer aux briques en utilisant la méthode Math.random() comme ça.

 var color = ["rgb (142, 68, 173)", "rgb (243, 156, 18)", "rgb (211, 84, 0)", "rgb (0, 106, 63)", "rgb (41, 128, 185) ", " rgb (192, 57, 43) ", " rgb (135, 0, 0) ", " rgb (39, 174, 96) "]; $ (". free-wall .size320"). each (function () {var backgroundColor = couleur [couleur.longueur * Math.random () << 0]; var briques = $ (this) .find (".brique ");! bricks.length && (briques = $ (this)); briques.css ({backgroundColor: backgroundColor});}); 

Enfin, nous allons ajouter des fonctions pour bien afficher la mise en page. Voici ce qui rend FreeWall génial. Il a quelques options et méthodes pour contrôler le comportement de la grille. Les options offertes par FreeWall sont:

 animate: true, // True pour que le bloc bouge avec l'animation. block.flex: true, // True à fait bloc peut redimensionner un peu pour s'adapter. cell.width: number, cell.height: nombre, fillGap: true, // True va créer une mise en page sans espace. gouttière: mixte, // L'espacement entre les blocs. selector: string, // Récupère tous les blocs pour la mise en page. 

Appelons le plugin en utilisant le code suivant.

 $ (function () {$ (". free-wall"). chaque (function () {var wall = nouveau freewall (this); wall.reset ({selector: '.size320', cellW: function (conteneur) { var cellWidth = 320; if (container.hasClass ('size320')) {cellWidth = conteneur.largeur () / 2;} renvoyer cellWidth;}, cellH: fonction (conteneur) {var cellHeight = 320; if (container.hasClass ('size320')) {cellHeight = conteneur.height () / 2;} return cellHeight;}, fixSize: 0, gutterY: 20, gutterX: 20, onResize: function () {wall.fitWidth ();}}) wall.fitWidth ();}); $ (window) .trigger ("redimensionner");}); 

Comme vous pouvez le voir dans le code de fonction ci-dessus, nous utilisons une partie de l'option, de la méthode et de l'événement FreeWall. Comme fixSize, gutterY, gutterX, onResize et fitWidth . Si vous souhaitez utiliser une autre option, méthode ou événement, vous pouvez trouver la documentation sur la page d'accueil officielle de FreeWall.

Vous pouvez maintenant voir la disposition dynamique de la grille en action dans la page de démonstration. Si vous redimensionnez votre navigateur, les briques seront automatiquement réorganisées et redimensionnées.

• Voir la démo
• Source de téléchargement

Un guide simple et facile pour comprendre Sass

Il y a quelque temps, Thoriq Firdaus a écrit un excellent article sur comment démarrer avec Sass, qui vous a montré comment installer et utiliser ce langage de préprocesseur CSS très utile (vous pouvez le vérifier, vous savez, pour commencer).Dans cet article, j'ai pensé que je pourrais vous donner un peu plus d'informations sur ce que vous pouvez faire avec Sass et comment les développeurs l'utilisent tous les jours pour créer un code CSS meilleur et plus modulaire. Passez

(Conseils techniques et de conception)

Vous pouvez créer une vidéo directement sur Facebook - une application à venir bientôt

Facebook a récemment lancé quelques fonctionnalités intéressantes et prévoit de faire beaucoup plus. Sur le plan du contenu vidéo, après l'introduction de fonctionnalités telles que Facebook Mentions, la société portera ses ambitions de contenu vidéo au niveau supérieur, car elle prépare une nouvelle application qui mettrait l'accent sur la création vidéo .Annoncée lors

(Conseils techniques et de conception)