Display HTML Lists In A Multi-column Newspaper Layout - jQuery AutoColumnList

AutoColumnList is a small and cross-browser jQuery plugin that converts the regular HTML lists into vertical columns.

Inspired by the jQuery Columnizer plugin that allows you to split the long list into list columns for better readability.

How to use it:

1. Insert jQuery JavaScript library and the AutoColumnList plugin's script into the html file.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="jquery.autocolumnlist.min.js"></script>

2. Attach the function autocolumnlist to the HTML list and specify the number of columns to display. Default: 4.

<ol id="demo">
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  <li>Aliquam tincidunt mauris eu risus.</li>
  <li>Vestibulum auctor dapibus neque.</li>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
</ol>

$(function() {
  $('#demo').autocolumnlist({
    columns: 3
  });
})

3. Specify minimum number of columns to generate. Default: 1.

$(function() {
  $('#demo').autocolumnlist({
    min: 2
  });
})

4. Specify the CSS classname to be attached to the list columns. Default: 'column'.

$(function() {
  $('#demo').autocolumnlist({
    classname: 'col'
  });
})

---

This awesome jQuery plugin is developed by Neolot. For more Advanced Usages, please check the demo page or visit the official website.