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

Configuration PHP, Apache et MySQL dans Mac sans MAMP - Partie II

Dans le didacticiel précédent de cette série, nous avons configuré Apache et PHP, ce qui nous permet d'exécuter des fichiers .php sur notre serveur local. En guise de suivi, nous allons maintenant installer et configurer MySQL que nous allons utiliser pour la base de données.Commençons.Installateur PHP Heureusement, MySQL se présente sous la forme d'un .pkg ins

(Conseils techniques et de conception)

Introduction à MathML - Le langage de balisage pour les mathématiques

MathML est un langage de balisage qui peut être utilisé pour afficher des notations mathématiques . Vous pouvez utiliser des balises MathML directement à partir de HTML5. Il est utile lorsque vous souhaitez afficher plus que de simples notations de Maths dans vos pages Web, et qu'il est assez facile à utiliser en raison de sa simplicité et de sa ressemblance avec le HTML .MathM

(Conseils techniques et de conception)