Auto-arrange <li> elements into equal columns

I have several values I'm rendering as <li> elements on my template and I want to further this by having them arranged into equal (or near-equal columns) automatically in the template. How can I achieve this?

So far I'm renderi开发者_开发技巧ng all the values as

<ul>
   {% for feature in features %}
      <li>{{ feature }}</li>
   {% endfor %}
</ul>

What about styling each li with style="float:left; width: {% width %}px;"

All you have to do is calculate the width parameter... eg width = 1000/features.length;

In newer browsers you can achieve this behaviour using CSS:

ul {
    -moz-column-count: 2; -moz-column-gap: 12px;
    -webkit-column-count: 2; -webkit-column-gap: 12px;
    column-count: 2; column-gap: 12px;
}

Unfortunately, IE doesn't play along (as of today). To work around this, I wanted to achieve the same effect using javascript. At first, I tried Columnizer, but that inserts divs into those innocent ul elements, which I didn't like.

So I went to build our own little plugin to do exactly what we need: ColumnizeLists, part of our jQuery extensions library.

Include the following script tag into your page:

<script src="https://github.com/teamaton/jquery-xt/blob/master/columnize-lists/tn.columnizelists.jquery.js"></script>

(or a local copy) and simply call

$('ul').columnizeLists({ useHeights: true })

and you're done :-)

Hope this helps.