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

Top 10 des logiciels de gestion de projet pour les équipes distantes

Vous avez des difficultés à communiquer avec votre équipe distante? Partagé le mauvais fichier à l'équipe, et il faut 3 heures pour les renvoyer à nouveau un par un? Votre équipe distante comprend mal les jalons de votre projet et même objectif? Il ne fait jamais bon d'avoir ces conflits tout en portant le stress de la réalisation du projet, mais vous pouvez réellement éliminer ces problèmes en utilisant le logiciel de gestion de projet en ligne.La montée en

(Conseils techniques et de conception)

99 conseils d'aéroport pour voyager comme un pro

Pour les personnes fatiguées et fatiguées, les vacances semblent toujours être une bonne idée. Mais pour arriver à ce bel endroit de vacances exigera beaucoup de planification intelligente, en gardant la trace de vos réservations et réservations, en pataugeant dans les aéroports bondés, bravant les lignes d'attente sans fin et les contrôles de sécurité.Nous avons

(Conseils techniques et de conception)