JQuery - Equalize Plugin - Versionsgeschichte

37.49.32.84 am 11. Oktober 2017 um 16:10 Uhr

2017-10-11T16:10:15Z

37.49.32.84 am 11. Oktober 2017 um 16:03 Uhr

2017-10-11T16:03:20Z

37.49.32.84 am 11. Oktober 2017 um 15:52 Uhr

2017-10-11T15:52:29Z

37.49.32.84: Die Seite wurde neu angelegt: „https://css-tricks.com/equal-height-blocks-in-rows/ // IIFE (function() { var currentTallest = 0, currentRowStart = 0, row…“

2017-10-11T15:44:55Z

Die Seite wurde neu angelegt: „https://css-tricks.com/equal-height-blocks-in-rows/ <syntaxhighlight lang="javascript"> // IIFE (function() { var currentTallest = 0, currentRowStart = 0, row…“

Neue Seite

https://css-tricks.com/equal-height-blocks-in-rows/
<syntaxhighlight lang="javascript">
// IIFE
(function() {

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

function setConformingHeight(el, newHeight) {
// set the height to something new, but remember the original height in case things change
el.data("originalHeight", (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight")));
el.height(newHeight);
}

function getOriginalHeight(el) {
// if the height has changed, send the originalHeight
return (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight"));
}

function columnConform() {

// find the tallest DIV in the row, and set the heights of all of the DIVs to match it.
$('.blocks').each(function() {

// "caching"
var $el = $(this);

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

if (currentRowStart != topPosition) {

// we just came to a new row. Set all the heights on the completed row
for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest); // set the variables for the new row rowDivs.length = 0; // empty the array currentRowStart = topPosition; currentTallest = getOriginalHeight($el); rowDivs.push($el); } else { // another div on the current row. Add it to the list and check if it's taller rowDivs.push($el); currentTallest = (currentTallest < getOriginalHeight($el)) ? (getOriginalHeight($el)) : (currentTallest); } }); // do the last row for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) { setConformingHeight(rowDivs[currentDiv], currentTallest); } } // If the content might change... probably debounce this and run it. // $(window).resize(function() { // columnConform(); // }); // DOM Ready // You might also want to wait until window.onload if images are the things that are unequalizing the blocks $(function() { columnConform(); }); })(); $('.blocks') would be changed to use whatever CSS selector you need to equalize. Or have the function accept a selector as a param or something.
</syntaxhighlight>

@@ Zeile 8: / Zeile 8: @@
 // IIFE
 (function() {
-var currentTallest = 0,
+  function setConformingHeight(el, newHeight) {
-currentRowStart = 0,
+    // set the height to something new, but remember the original height in case things change
-rowDivs = new Array();
+    el.data("originalHeight", (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight")));
-function setConformingHeight(el, newHeight) {
+  function getOriginalHeight(el) {
-// set the height to something new, but remember the original height in case things change
+    // if the height has changed, send the originalHeight
-el.data("originalHeight", (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight")));
+    return (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight"));
-el.height(newHeight);
-function getOriginalHeight(el) {
+  function columnConform() {
-// if the height has changed, send the originalHeight
+    // find the tallest DIV in the row, and set the heights of all of the DIVs to match it.
-return (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight"));
+    $('.blocks').each(function() {
+      // "caching"
+      var $el = $(this);
-function columnConform() {
+      var topPosition = $el.position().top;
+      if (currentRowStart != topPosition) {
-// find the tallest DIV in the row, and set the heights of all of the DIVs to match it.
+        // we just came to a new row. Set all the heights on the completed row
-$('.blocks').each(function() {
+        for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest); // set the variables for the new row
+        rowDivs.length = 0; // empty the array
-// "caching"
+        currentRowStart = topPosition;
-var $el = $(this);
+        currentTallest = getOriginalHeight($el);
+        rowDivs.push($el);
-var topPosition = $el.position().top;
+      } else {
+        // another div on the current row. Add it to the list and check if it's taller
-if (currentRowStart != topPosition) {
+        rowDivs.push($el);
+        currentTallest = (currentTallest < getOriginalHeight($el)) ? (getOriginalHeight($el)) : (currentTallest);
 // we just came to a new row. Set all the heights on the completed row
-for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest); // set the variables for the new row rowDivs.length = 0; // empty the array currentRowStart = topPosition; currentTallest = getOriginalHeight($el); rowDivs.push($el); } else { // another div on the current row. Add it to the list and check if it's taller rowDivs.push($el); currentTallest = (currentTallest < getOriginalHeight($el)) ? (getOriginalHeight($el)) : (currentTallest); } }); // do the last row for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) { setConformingHeight(rowDivs[currentDiv], currentTallest); } } // If the content might change... probably debounce this and run it. // $(window).resize(function() { // columnConform(); // }); // DOM Ready // You might also want to wait until window.onload if images are the things that are unequalizing the blocks $(function() { columnConform(); }); })(); $('.blocks') would be changed to use whatever CSS selector you need to equalize. Or have the function accept a selector as a param or something.
+    });
 </syntaxhighlight>

← Nächstältere Version		Version vom 11. Oktober 2017, 16:03 Uhr
Zeile 39:		Zeile 39:
	for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest); // set the variables for the new row rowDivs.length = 0; // empty the array currentRowStart = topPosition; currentTallest = getOriginalHeight($el); rowDivs.push($el); } else { // another div on the current row. Add it to the list and check if it's taller rowDivs.push($el); currentTallest = (currentTallest < getOriginalHeight($el)) ? (getOriginalHeight($el)) : (currentTallest); } }); // do the last row for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) { setConformingHeight(rowDivs[currentDiv], currentTallest); } } // If the content might change... probably debounce this and run it. // $(window).resize(function() { // columnConform(); // }); // DOM Ready // You might also want to wait until window.onload if images are the things that are unequalizing the blocks $(function() { columnConform(); }); })(); $('.blocks') would be changed to use whatever CSS selector you need to equalize. Or have the function accept a selector as a param or something.		for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest); // set the variables for the new row rowDivs.length = 0; // empty the array currentRowStart = topPosition; currentTallest = getOriginalHeight($el); rowDivs.push($el); } else { // another div on the current row. Add it to the list and check if it's taller rowDivs.push($el); currentTallest = (currentTallest < getOriginalHeight($el)) ? (getOriginalHeight($el)) : (currentTallest); } }); // do the last row for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) { setConformingHeight(rowDivs[currentDiv], currentTallest); } } // If the content might change... probably debounce this and run it. // $(window).resize(function() { // columnConform(); // }); // DOM Ready // You might also want to wait until window.onload if images are the things that are unequalizing the blocks $(function() { columnConform(); }); })(); $('.blocks') would be changed to use whatever CSS selector you need to equalize. Or have the function accept a selector as a param or something.
	</syntaxhighlight>		</syntaxhighlight>
		+
		+	== Original von Stephan Akins ==
		+	<syntaxhighlight lang="javascript">
		+	var currentTallest = 0;
		+	var currentRowStart = 0;
		+	var rowDivs = new Array();
		+
		+	function setConformingHeight(el, newHeight) {
		+	// set the height to something new, but remember the original height in case things change
		+	el.data("originalHeight", (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight")));
		+	el.height(newHeight);
		+	}
		+
		+	function getOriginalHeight(el) {
		+	// if the height has changed, send the originalHeight
		+	return (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight"));
		+	}
		+
		+	function columnConform() {
		+
		+	// find the tallest DIV in the row, and set the heights of all of the DIVs to match it.
		+	$('div.column').each(function(index) {
		+
		+	if(currentRowStart != $(this).position().top) {
		+
		+	// we just came to a new row. Set all the heights on the completed row
		+	for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest);
		+
		+	// set the variables for the new row
		+	rowDivs.length = 0; // empty the array
		+	currentRowStart = $(this).position().top;
		+	currentTallest = getOriginalHeight($(this));
		+	rowDivs.push($(this));
		+
		+	} else {
		+
		+	// another div on the current row. Add it to the list and check if it's taller
		+	rowDivs.push($(this));
		+	currentTallest = (currentTallest < getOriginalHeight($(this))) ? (getOriginalHeight($(this))) : (currentTallest);
		+
		+	}
		+	// do the last row
		+	for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest);
		+
		+	});
		+
		+	}
		+
		+
		+	$(window).resize(function() {
		+	columnConform();
		+	});
		+
		+	$(document).ready(function() {
		+	columnConform();
		+	});
		+	</syntaxhighlight>
		+	(the above code assumes you have assigned the CSS class called "column" to each of the DIVs that are "Floating Left")
		+
		+	If you can read Javascript/jQuery, you will find the code comments will sufficiently explain how it works; but in a nutshell: The script goes through each DIV, determining which are on the same row by comparing the X value of the top of each container. It keeps track of which is the tallest, and then sets the height for each DIV in the row based on that value.

@@ Zeile 1: / Zeile 1: @@
-https://css-tricks.com/equal-height-blocks-in-rows/
+http://stephenakins.blogspot.de/2011/01/uniform-div-heights-for-liquid-css-p.html (original von Stephan Akins)
 <syntaxhighlight lang="javascript">
 // IIFE