Created
July 19, 2014 19:38
-
-
Save gmaggio/7320aad6391a4961eda3 to your computer and use it in GitHub Desktop.
[jQuery] Equal Height Rows - Responsive
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Equal Height Rows - Responsive | |
* | |
* Source: | |
* http://codepen.io/micahgodbolt/pen/FgqLc?editors=101 | |
* http://css-tricks.com/equal-height-blocks-in-rows/ | |
* | |
*/ | |
equalheight = function(container){ | |
var currentTallest = 0, | |
currentRowStart = 0, | |
rowDivs = [], | |
$el, | |
topPosition = 0; | |
$(container).each(function() { | |
$el = $(this); | |
$($el).height('auto'); | |
topPostion = $el.position().top; | |
if (currentRowStart != topPostion) { | |
// We just came to a new row. | |
// Set all the heights on the completed row. | |
for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) { | |
rowDivs[currentDiv].height(currentTallest); | |
} | |
// Set the variables for the new row. | |
rowDivs.length = 0; // empty the array | |
currentRowStart = topPostion; | |
currentTallest = $el.height(); | |
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 < $el.height()) ? ($el.height()) : (currentTallest); | |
} | |
// Do the last row. | |
for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) { | |
rowDivs[currentDiv].height(currentTallest); | |
} | |
}); | |
}; | |
$(window).load(function() { | |
equalheight('.row'); | |
}); | |
$(window).resize(function(){ | |
equalheight('.row'); | |
}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
article { | |
float: left; | |
width: 23%; | |
background: #ccc; | |
margin: 10px 1%; | |
padding: 1%; | |
} | |
@media all and (max-width: 900px) { | |
article { | |
width: 48% | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<section class="main"> | |
<article class="row">Gally maroon schooner wench provost fathom haul wind parrel chantey brigantine.</article> | |
<article class="row">Ho six pounders Arr black spot port jib hogshead spirits bilge rat Admiral of the Black. Blow the man down measured fer yer chains hail-shot jolly boat gangway pillage lugsail wherry Jolly Roger Privateer.</article> | |
<article class="row">Lass gangplank bilged on her anchor bring a spring upon her cable rigging lookout Admiral of the Black sheet wench rutters.</article> | |
<article class="row">Driver rope's end port spirits cog fore ye snow sloop hogshead. Belaying pin yo-ho-ho bilge rat come about squiffy spirits jack galleon Brethren of the Coast hang the jib.</article> | |
<article class="row">Hail-shot jolly boat gangway pillage lugsail wherry Jolly Roger Privateer.</article> | |
<article class="row">Plate Fleet strike colors nipper league warp to go on.</article> | |
<article class="row">Admiral of the Black sheet wench rutters.</article> | |
<article class="row">Jack galleon Brethren of the Coast hang the jib. Blow the man down measured fer yer. Admiral of the Black sheet wench rutters.</article> | |
</section> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment