jQuery maçonnerie laissant de l'espace
Je suis d'essayer d'utiliser jQuery-Maçonnerie, dans un projet et qu'il ne fonctionne pas correctement: il y a un écart dans le coin en haut à droite de la grille. J'ai tenté d'ajuster la largeur de la grille et des marges, ce qui entraîne un blocage par ligne ou tous les blocs de courir ensemble (mais toujours avec un écart de haut.)
Il ne fait pas les regarder comme les blocs sont en cours de réaménagement, bien que la Maçonnerie est l'application de sa classe et de l'attribution de positionnement absolu des éléments comme prévu.
J'ai été convaincu que je faisais quelque chose de mal, mais maintenant, je ne suis pas si sûr. J'ai pris un travail de violon à partir d'une question semblable sur la Pile (à l'http://stackoverflow.com/questions/11695574/jquery-masonry-almost-always-empty-spaces) et soigneusement modifié pour utiliser les dimensions que je suis travailler avec, et il semble juste être incapables de gérer cette sélection d'éléments.
Violon: http://jsfiddle.net/dVPA9/4/
- Il fonctionne comme prévu.. Vous avez besoin de visualiser les trois colonnes, vous avez défini.. si un élément occupe une colonne, puis un élément suivant peut aller plus haut que celui de l'élément sur cette colonne. (aussi, vous devez tenir compte dans votre largeurs des éléments de la gouttière, de sorte que le
.semi
devrait être 2x320+30=670 va de même pour les 3 élément de colonne, de sorte 3x320+60=1020 pour la.wide
) - Pourquoi ne peut-il pas aller plus haut? Code de la maçonnerie à l'aide d'un positionnement absolu. Quand je regarde les pages de démonstration pour la Maçonnerie (et en effet, le Freetile plugin proposé par @OliverRefalo ci-dessous), leurs exemples, impliquent un certain nombre d'éléments disparates d'être montés ensemble dans un bloc cohérent, avec des lacunes ne se produit que lorsque les trous sont physiquement possible.
- (Et ouais, je sais que mon largeurs ont été un peu foiré, je ne l'ai pas corriger parce qu'ils n'étaient pas pertinentes, et je craignais que mon marges ont effectivement contribué au problème.)
- Je ne sais pas pour les autres plugins, mais pour la maçonnerie, c'est juste la façon dont il fonctionne.. le but n'est pas de faire l'étanchéité à l'air de la grille. mais pour minimiser les verticales des lacunes. Si un élément bloque toutes les colonnes, alors aucun élément suivant peut aller au-dessus d'elle.. Voir l'exemple à la page d'accueil de maçonnerie et vous verrez lacunes ...
- En regardant la Maçonnerie de la page de titre (masonry.desandro.com), il y a une lacune, et il est explicitement car il n'y a aucun moyen d'arranger les morceaux sans écart. Dans cet exemple, le bloc 8 se déplace vers le haut une ligne au-dessus de son frère, 9.
- 8 peut bien sûr être au-dessus de 9 puisqu'elle vient avant elle... mais si vous remarquez, il n'y a pas de nombre au-dessus de l'autre avec un nombre inférieur (sur la même colonne)
Vous devez vous connecter pour publier un commentaire.
Eh bien, pas vraiment une solution à votre problème, alors j'espère que vous n'aurez pas de voter sur moi.
J'ai été en utilisant ces deux autres projets avec beaucoup de succès:
Il y a aussi:
Sincèrement,
Avec la Maçonnerie et Isotopiques pour cette question, vous devez vous rappeler que tout cela fonctionne sur un module, ce qui signifie que votre largeurs de colonne doit adhérer à un plus petit commun diviseur (en pixels). Alors, si vous avez des éléments couvrant plus d'une colonne (un module), en fonction de l'état de l'écran (vous avez d'énormes éléments) le deuxième élément (beaucoup plus large que la première) ne peut pas être monté à la droite du premier élément (beaucoup plus étroite que la seconde).
Aussi, vous êtes à la définition d'une largeur fixe à votre maçonnerie #container (#grid) qui, bien sûr, défie tout le but du plugin.
Voir par vous-même: supprimer largeur: 1104px; sur votre #de la grille et de zoom de votre navigateur, vue sur le max sur vos violons de la page, vous verrez que si il y a de l'espace, la seconde (noir) de l'élément s'insérera à la droite de la première (étroit gris) de l'élément.
Donc, tout se résume à trouver un bon petit commun diviseur pour votre largeur de colonne et faire en sorte que certains éléments ne sont pas trop grandes et ne pas durée trop de colonnes (plus de deux). Ensuite, il sera.
Voir aussi https://stackoverflow.com/a/11814339/963514 et https://stackoverflow.com/a/11701171/963514 à voir pour plus d'explications similaires "problèmes".
Comme apparemment c'est une trace indélébile d'un problème avec la Maçonnerie et des solutions similaires, j'ai décidé que j'avais besoin de renouveler mon propre ici. J'ai aussi décidé que ce serait mieux géré en PHP, en tant que par défaut, les DIVs flottants aura de grandes lacunes dans beaucoup de circonstances.
Voici l'algorithme que j'ai utilisé, avec des commentaires pour expliquer les points délicats. Il aurait pu le faire en jQuery trivialement, mais sur le revers de la médaille, il serait méchant pour les utilisateurs sans JavaScript.