Skip to content

Instantly share code, notes, and snippets.

@oomlaut
Created May 10, 2013 16:31
Show Gist options
  • Save oomlaut/5555583 to your computer and use it in GitHub Desktop.
Save oomlaut/5555583 to your computer and use it in GitHub Desktop.
Columnize a list using jQuery
(function($){
$('ul').each(function() {
var $lis = $('li', this);
cols = [],
colNum= 4,
colLength = Math.ceil($lis.length / colNum),
$newList = $('#columnify');
for(var i = 0; i < colLength; i++){
cols.push($('<ul>').appendTo($newList));
}
$lis.each(function(i,v){
$(v).appendTo(cols[Math.floor(i/colLength)]);
});
});
})(jQuery);
<!doctype html>
<html>
<head>
<title>
Sample Columnizing Lists
</title>
<script src="http://code.jquery.com/jquery-1.9.0.min.js">
</script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
</ul>
<div id="columnify"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment