Javascript Girl
  1. Javascript Girl
  3. Positionnement multiple, taille aléatoire, éléments absolument positionnés afin qu'ils ne se chevauchent pas
Intereting Posts
Événement de diffusion AngularJs Comment obtenir la chaîne de zone d'un polygone en utilisant le dépliant.draw Three.js – obtenir le nom de l'objet avec le clic de la souris Stubbing et / ou se moquer d'une classe dans sinon.js? Texte de la marque lorsque le texte dépasse Comment puis-je obtenir le compteur d'un bouton google plus +1? JQuery append un élément s'il n'existe pas, sinon, remplacer Dernier segment d'URL Variable non hissée Présentation du formulaire Jquery après le chargement du fichier La boîte de dialogue "confirmer" personnalisée en JavaScript? Erreur lors du chargement de Google oauth2 javascript api lors de la connexion à plusieurs comptes Google Obtenir un jeton d'accès API Spotify avec Node.js / Express.js Dc.js – comment obtenir la moyenne d'une colonne dans l'ensemble de données Date de Javascript: Assurez-vous que getMinutes (), getHours (), getSeconds () met 0 devant si nécessaire

Positionnement multiple, taille aléatoire, éléments absolument positionnés afin qu'ils ne se chevauchent pas

Ok, je dois être en mesure de positionner un tas de mots de position aléatoire parfaitement positionnés sur une page, mais je ne veux pas que tous les éléments se chevauchent.

L'objectif final est d'avoir un nuage de mots fluide qui répond à l'interaction de l'utilisateur (rappelez-vous le Google Balls Doodle ?). J'aimerais vraiment construire cela à partir de zéro pour développer ma compréhension de ce type de développement. Toute aide dans ce département serait également appréciée 🙂

Je ne suis pas sûr si vous voulez également placer les mots aléatoirement dans un conteneur, mais j'ai écrit un violon qui fait exactement cela. Vous pouvez modifier le code pour positionner un mot juste après l'autre si vous le souhaitez. Je pense que la partie clé est la méthode pour vérifier s'il y a une collision.

Voir http://jsfiddle.net/fZtdt/13/

EDIT: Notez qu'il s'agit d'un code très simple et non optimisé. Si, par exemple, vous ajoutez à plusieurs mots, il est probable que le script ne pourra pas correspondre à tous les mots dans le conteneur et entrer dans une boucle sans fin.

J'ai demandé au script de Jules d'ajouter cette amélioration: la recherche d'une région sans chevauchement est délimitée (sinon, le script d'origine sera en boucle) et la meilleure région (celle avec le plus petit chevauchement) est sélectionnée.

Voir http://jsfiddle.net/Vnyvc/21/

Jouez avec la variable maxSearchIterations et / ou la taille de la région entière, cela fait vraiment une différence.