Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Use jQuery to calculate the heights of each row in a list, and the total number of rows (even if the list items are floated)
/**
* For a list, calculate how many rows, height of each row
*
* @param {object} l The list jQuery object
* @return {object}
*/
function pilau_list_dimensions( l ) {
var d = {
row_heights: []
};
var lis = l.children( 'li' );
var r = 1; // row
var llio; // last li offset
var lih; // li height
var rh; // row height (highest li)
// Go through every li
lis.each( function( i ) {
var el = jQuery( this );
var elo = el.offset();
var lih = el.outerHeight( true );
if ( typeof llio == 'undefined' ) {
// First iteration
rh = lih;
} else if ( elo.top > llio.top ) {
// This element is lower than the last one - we're on a new row
r++;
d.row_heights.push( rh );
} else {
// Pass li height through as new highest li in row?
if ( lih > rh ) {
rh = lih;
}
}
// Pass this element's offset through
llio = elo;
});
// And the last row...
d.row_heights.push( rh );
// Add total number of rows
d.row_count = r;
return d;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.