hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


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

Les 15 meilleures applications du marché OpenShift

Les 15 meilleures applications du marché OpenShift

Vous avez déjà entendu parler d'OpenShift? OpenShift est une plate-forme cloud simplifiée permettant aux développeurs de créer et déployer des applications sans effort sur le Cloud . Il permet l'utilisation gratuite de trois petits engrenages et 1 Go de stockage de base de données. Il prend en charge une grande variété de langages de programmation, de bases de données et de plates-formes. En plus

(Conseils techniques et de conception)

20 coups de drones incroyables

20 coups de drones incroyables

Les drones sont peut-être les technologies les plus innovantes de notre temps et les outils les plus utiles pour les photographes. Avec les drones, vous pouvez filmer des vidéos aériennes ou prendre des photos aériennes. Ce genre de photos a l'air totalement hors du monde, car il est difficile d'imaginer comment les lieux ressemblent vraiment du ciel .Cer

(Conseils techniques et de conception)