jQuery Girl
  1. jQuery Girl
  3. Rangées d’égale hauteur pour les éléments de largeur fluide
Intereting Posts
activer les champs de saisie si les boutons radio sont cochés avec jQuery jQuery – Cliquez sur LI, affichez / cachez UL – Cliquez sur LI: un href, continuez à afficher UL et ouvrez une fenêtre vierge. empêcher la sélection du noeud jsTree Appel Ajax en cochant une case jquery .html () VS innerHTML () Sélecteur jQuery où text = une valeur changer dynamicment l’atsortingbut id de n’importe quelle balise pendant d’innombrables fois thème et style de dialog jQuery Appelez la méthode serveur sans actualiser la page Pendant la publication ajax dans mvc4 avec d’énormes données, le système lève une exception System.ArgumentException. Règles de filtrage JqGrid – Pouvons-nous filtrer en fonction d’un tableau? Enrouler une div tous les trois divs Utilisation des éléments collants JQuery Changer la valeur de href en utilisant jQuery Erreur d’parsing des objects JSON à l’aide du plug-in jQuery Form

Rangées d’égale hauteur pour les éléments de largeur fluide

J’ai déjà utilisé plusieurs fois le script jQuery Chris Coyiers de même hauteur , et cela a toujours très bien fonctionné.

Cela étant dit, j’ai toujours développé des sites Web conçus pour une résolution spécifique. Cette fois-ci, je développe un site Web réactif et le conteneur principal a une largeur fluide. En tant que tel, j’ai rencontré un problème et je ne trouve pas de solution à mon problème.

Dans son billet, Chris dit ceci à propos des largeurs de fluide:

Qu’en est-il de la largeur du fluide? L’un des principaux avantages de ne pas utiliser de table à cet effet est que les div flottantes peuvent se réorganiser en fonction de l’espace horizontal disponible, ce qui est agréable pour une largeur de fluide. Nous pouvons également ajuster le code ci-dessus pour y remédier. En gros, lors de la première exécution, nous mesurerons la hauteur de chaque bloc et nous nous en souviendrons avec la méthode data () de jQuery. Ensuite, lorsque la fenêtre est redimensionnée, exécutez le code à nouveau, mais utilisez la taille d’origine pour ajuster les lignes, pas la nouvelle taille.

Notez qu’il fait spécifiquement référence à un conteneur de largeur de fluide. Dans mon cas, ce n’est pas seulement le conteneur, mais les éléments enfants qui ont également une largeur fluide. Les mêmes blocs que je dois égaliser sont les mêmes blocs qui ont des largeurs de fluide et s’adaptent à la résolution de la fenêtre / du conteneur.

Je pense que, parce que l’élément “originalHeight” de l’élément change avec la taille du conteneur, le script ne fonctionnera plus correctement.

Ma spéculation est peut-être fausse, mais d’une manière ou d’une autre, cela ne fonctionne pas avec des éléments de largeur fluide. Vous cherchez de l’aide!

Bien sûr, voici un scénario que j’ai créé pour illustrer le problème. Redimensionnez simplement la largeur de la fenêtre et vous remarquerez que les hauteurs des conteneurs ne sont pas mises à jour.

J’exécute le code suivant pour appeler la fonction sur l’événement de redimensionnement de la fenêtre: 

$(window).resize(function() { columnConform(); });

Merci d’avance

Vous n’égalisez que les hauteurs des colonnes qui existent sur une ligne afin de pouvoir remplacer tout ce que JS par cette 

 $.fn.extend({ equalHeights: function(options){ var ah=(Math.max.apply(null, $(this).map(function(){ return $(this).height(); }).get())); if (typeof ah=='number') $(this).height(ah); } });

et exécuter comme si 

 $(document).ready(function() { $(window).resize(function() { $('.equalize').equalHeights(); }).sortinggger('resize'); // don't write code twice just to execute on page load - sortinggger the event you just bound to instead })

Mais si vous voulez le faire par démo de pseudo rangée de travail 

 
     
  • One
    •  
  • Two
    •  ....

JS 

 $.fn.extend({ equalHeights: function(){ var top=0; var classname=('equalHeights'+Math.random()).replace('.',''); $(this).each(function(){ if ($(this).is(':visible')){ var thistop=$(this).offset().top; if (thistop>top) { $('.'+classname).removeClass(classname); top=thistop; } $(this).addClass(classname); $(this).height('auto'); var h=(Math.max.apply(null, $('.'+classname).map(function(){ return $(this).outerHeight(); }).get())); $('.'+classname).height(h); } }).removeClass(classname); } }); $(function(){ $(window).resize(function(){ $('.eqme li').equalHeights(); }).sortinggger('resize'); });

Cela va même prendre en charge de nombreux éléments qui sont les enfants du même parent, même s’ils cassent une ligne, par exemple un ul contenant 100 éléments li lorsque seulement 10 sont ajustés sur une ligne, ou lorsque la largeur de li est statique alors que la largeur de la page n’est pas Lors du redimensionnement, ils effaceront les nouvelles lignes lorsque la fenêtre sera réduite (ou reviendront à la fenêtre précédente si leur largeur est augmentée), puis leur hauteur sera fixée au pseudo-rang le plus élevé.

Remarques:

Les commentaires suggèrent que outerHeight() fonctionne mieux que .height() dans certaines situations.

En production, dans la fonction window.resize, j’ai ajouté un clearTimeout et un setTimeout de 100 ms avant de réagir au changement de taille pour empêcher le ralentissement lors du redimensionnement en faisant glisser un coin.

En supposant que j’ai compris votre question, ce code devrait fonctionner: 

 $(document).ready(function() { $(window).on('resize', function() { $('.equalize').css('height', highest($('p'))); }).sortinggger('resize'); }); function highest(el) { var highest = 0; el.each(function() { var height = $(this).height(); if(height > highest) { highest = height; } }); return highest; }

Violon