SHARE
TWEET

jquery.columnizelist.js

a guest Jul 14th, 2010 243 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /*
  2. Copyright (c) 2007 Christian yates
  3. christianyates.com
  4. chris [at] christianyates [dot] com
  5. Licensed under the MIT License:
  6. http://www.opensource.org/licenses/mit-license.php
  7.  
  8. Inspired by work of Ingo Schommer
  9. http://chillu.com/2007/9/30/jquery-columnizelist-plugin
  10. */
  11. (function($){
  12.   $.fn.columnizeList = function(settings){
  13.     settings = $.extend({
  14.       cols: 3,
  15.       constrainWidth: 0
  16.     }, settings);
  17.     // var type=this.getNodeType();
  18.     this.each(function() {
  19.       var container = $(this);
  20.       if (container.length == 0) { return; }
  21.       var prevColNum = 10000; // Start high to avoid appending to the wrong column
  22.       var size = $('li',this).size();
  23.       var percol = Math.ceil(size/settings.cols);
  24.       var tag = container[0].tagName.toLowerCase();
  25.       var classN = container[0].className;
  26.       var colwidth = Math.floor($(container).width()/settings.cols);
  27.       var maxheight = 0;
  28.       // Prevent stomping on existing ids with pseudo-random string
  29.       var rand = Math.floor(Math.random().toPrecision(6)*10e6);
  30.       $('<ul id="container'+rand+'" class="'+classN+'"></ul>').css({width:$(container).width()+'px'}).insertBefore(container);
  31.       $('li', container).each(function(i) {
  32.         var currentColNum = Math.floor(i/percol);
  33.         if(prevColNum != currentColNum) {
  34.           if ($("#col" + rand + "-" + prevColNum).height() > maxheight) { maxheight = $("#col" + rand + "-" + prevColNum).height(); }
  35.           $("#container"+rand).append('<li class="list-column-processed"><'+tag+' id="col'+rand+'-'+currentColNum+'"></'+tag+'></li>');
  36.         }
  37.         $(this).attr("value",i+1).appendTo("#col"+rand+'-'+currentColNum);
  38.         prevColNum = currentColNum;
  39.       });
  40.       $("li.list-column-processed").css({
  41.         'float':'left',
  42.         'list-style':'none',
  43.         'margin':0,
  44.         'padding':0
  45.       });
  46.       if (settings.constrainWidth) {
  47.         $(".list-column-processed").css({'width':colwidth + "px"});
  48.       };
  49.       $("#container"+rand).after('<div style="clear: both;"></div>');
  50.       $("#container"+rand+" "+tag).height(maxheight);
  51.       // Add CSS to columns
  52.       container.remove();
  53.     });
  54.     return this;
  55.   };
  56. })(jQuery);
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top