columnized list items

by bradleygriffith

HTML

<ul id='grid-test'>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
    <li>F</li>
    <li>G</li>
    <li>H</li>
    <li>I</li>
    <li>J</li>
    <li>K</li>
    <li>L</li>
    <li>M</li>
    <li>N</li>
    <li>O</li>
    <li>P</li>
    <li>Q</li>
    <li>R</li>
<ul>

CSS

body {
    padding: 25px;
    font-family: 'helvetica neue', helvetica, arial, sans-serif;
    color: #3B3B3E;
}

li {
    background: #EFEFEF;
    text-align: center;
    width: 60px;
    padding: 10px 0;
    margin: 5px;
}

JavaScript

$(document).ready(function(){
    Array.prototype.chunk = function(chunk_size){
        var array = this,
            new_array = [],
            chunk_size = chunk_size,
            i,
            length;
        
        for(i = 0, length = array.length; i < length; i += chunk_size){
            new_array.push(array.slice(i, i + chunk_size));
        }
        return new_array;
    }
    
    function buildColumns(list, row_limit) {
        var list_items = $(list).children('li').map(function(){return this;}).get(),
            row_limit = row_limit,
            columnized_list_items = list_items.chunk(row_limit);
        
        $(columnized_list_items).each(function(i){
            if (i != 0){
                var item_width = $(this).outerWidth(),
                    item_height = $(this).outerHeight(),
                    top_margin = -((item_height * row_limit) + (parseInt($(this).css('margin-top')) * row_limit)),
                    left_margin = (item_width * i) + (parseInt($(this).css('margin-left')) * (i + 1));
                
                $(this[0]).css('margin-top', top_margin);
                $(this).css('margin-left', left_margin);
            }
            $(this).addClass('col-'+(i+1));

        });
    }
    
    buildColumns('ul#grid-test', 5);
});