Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
112 lines (97 sloc) 2.64 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<style>
* {
margin:0;
padding:0;
line-height:1;
}
ul {
list-style:none;
-o-column-count:2;
-moz-column-count:2;
-webkit-column-count:2;
}
</style>
</head>
<body>
<ul>
<li>Lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>consectetuer</li>
<li>Aliquam</li>
<li>tincidunt</li>
<li>mauris</li>
<li>eu</li>
<li>risus</li>
</ul>
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script>
(function($){
// from modernizr
function columnCountSupported() {
var elem = document.createElement('ch'),
elemStyle = document.createElement('ch').style,
domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
prop = 'columnCount',
uc_prop = prop.charAt(0).toUpperCase() + prop.substr(1),
props = (prop + ' ' + domPrefixes.join(uc_prop + ' ') + uc_prop).split(' ');
for ( var i in props ) {
if ( elemStyle[ props[i] ] !== undefined ) {
return true;
}
}
return false;
}
$.fn.columnizeList = function(settings){
settings = $.extend($.fn.columnizeList.defaults, settings);
if (!columnCountSupported()) {
return this.each(function() {
var $list = $(this),
// we create the clone of our list in order to test height/width
$listClone = $list.clone(),
$items = $list.children('li'),
itemsPerCol = Math.ceil($items.length / settings.columnCount),
columnWidth,
columnHeight,
itemHeight = 0,
widthCounter = 0;
// hide the clone from the viewport
$listClone.css({
position:'absolute',
left:'-4999px'
});
// append the clone to the body, so it has dimensions
$('body').append($listClone);
heightCounter = itemHeight = $listClone.find('li').first().outerHeight();
columnHeight = itemsPerCol * itemHeight;
columnWidth = Math.floor(100 / settings.columnCount);
$items.each(function(i) {
var $item = $(this);
// new column
if (i > 0 && i % itemsPerCol == 0) {
widthCounter += columnWidth;
$item.css('margin-top', -columnHeight);
}
if (widthCounter > 0) {
$item.css('margin-left', widthCounter+'%');
}
});
});
}
};
$.fn.columnizeList.defaults = {
columnCount: 2,
columnGap: 0
};
})(jQuery);
$('ul').columnizeList();
</script>
</body>
</html>