Gleiche Höhen für Blöcke in Zeilen

Es gibt viele Lösungen für gleich hohe Spalten mit jQuery (wie z.B. matchHeight.js). Die Grundidee ist, die Höhen aller Spalten zu messen und dann allen Spalten die Höhe der höchsten Spalte zuzuweisen.

Aber was, wenn es mehrere Zeilen von Blöcken gibt und Sie nur die Höhen der Blöcke in der aktuellen Zeile anpassen möchten? Dies kann durch unterschiedlich große Thumbnails oder unterschiedliche Textmengen in jedem Feld geschehen.

Stephen Akins hat eine clevere Idee gepostet, wie man dieses Problem löst. Die Idee ist im Grunde dieselbe: Messen Sie die Höhen der divs und setzen Sie sie auf die höchste, aber bevor es das tut, misst es die obere Position. Daraus kann es erkennen, welche divs zu welcher Zeile gehören und nur divs innerhalb dieser Zeile beeinflussen.

Hier ist das Ganze. Ich habe es nur ein wenig von Stephens Originalversion angepasst, um es etwas effizienter zu gestalten.

// IIFE
(function() {

var currentTallest = 0,
currentRowStart = 0,
rowDivs = new Array();

function setConformingHeight(el, newHeight) {
// Setze die Höhe auf etwas Neues, aber erinnere dich an die ursprüngliche Höhe, falls sich etwas ändert
el.data(“originalHeight”, (el.data(“originalHeight”) == undefined) ? (el.height()) : (el.data(“originalHeight”)));
el.height(newHeight);
}

function getOriginalHeight(el) {
// Wenn sich die Höhe geändert hat, gib die ursprüngliche Höhe zurück
return (el.data(“originalHeight”) == undefined) ? (el.height()) : (el.data(“originalHeight”));
}

function columnConform() {

// Finde das höchste DIV in der Zeile und setze die Höhen aller DIVs auf diese Höhe.
$(‘.blocks’).each(function() {

// “Caching”
var $el = $(this);

var topPosition = $el.position().top;

if (currentRowStart != topPosition) {

// Wir sind gerade zu einer neuen Zeile gekommen. Setze alle Höhen für die abgeschlossene Zeile
for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest); // Setze die Variablen für die neue Zeile rowDivs.length = 0; // Leere das Array currentRowStart = topPosition; currentTallest = getOriginalHeight($el); rowDivs.push($el); } else { // Ein weiteres div in der aktuellen Zeile. Füge es zur Liste hinzu und prüfe, ob es höher ist rowDivs.push($el); currentTallest = (currentTallest < getOriginalHeight($el)) ? (getOriginalHeight($el)) : (currentTallest); } }); // Bearbeite die letzte Zeile for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) { setConformingHeight(rowDivs[currentDiv], currentTallest); } } // Wenn sich der Inhalt ändern könnte... wahrscheinlich debouncen und ausführen. // $(window).resize(function() { // columnConform(); // }); // DOM Ready // Sie möchten vielleicht auch auf window.onload warten, wenn Bilder die Blöcke ungleichmäßig machen $(function() { columnConform(); }); })(); $('.blocks') müsste durch den gewünschten CSS-Selektor ersetzt werden, um die Höhen zu vereinheitlichen. Oder die Funktion akzeptiert einen Selektor als Parameter oder so.

Wie sieht es mit fließenden Breiten aus?

Einer der Hauptgründe, warum man keine Tabelle dafür verwendet, ist, dass gefloatete divs sich basierend auf dem verfügbaren horizontalen Platz neu anordnen können, was für fließende Breiten praktisch ist. Wir können den obigen Code auch dafür anpassen. Grundsätzlich messen wir beim ersten Ausführen dieses Codes die Höhe jedes Blocks und speichern sie mit der data()-Methode von jQuery. Wenn dann das Fenster vergrößert wird, führen wir den Code erneut aus, verwenden aber die ursprüngliche Größe, um die Zeilen anzupassen, nicht die neue Größe.

Die Demo hierfür ist fließende Breite. Wenn Sie diesen Code möchten, schauen Sie sich einfach den Quellcode an und schnappen Sie ihn sich

Demo ansehen

Wünschten, es gäbe keine jQuery-Abhängigkeit?

• Ben Howdle: Easy Peasy Equal Heights
• Vitalii Skorokhod: javascript equal height blocks

\