JQuery - Equalize Plugin
Aus Wikizone
Version vom 11. Oktober 2017, 16:52 Uhr von 37.49.32.84 (Diskussion)
http://stephenakins.blogspot.de/2011/01/uniform-div-heights-for-liquid-css-p.html (original von Stephan Akins)
https://css-tricks.com/equal-height-blocks-in-rows/ (Modifizierte Version etwas effektiverer Code)
Equal Heights - JavaScript (ohne jQuery)
// 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.