// version 1.5.0 // http://welcome.totheinter.net/columnizer-jquery-plugin/ // created by: Adam Wulf @adamwulf, adam.wulf@gmail.com (function($){ $.fn.columnize = function(options) { var defaults = { // default width of columns width: 400, // optional # of columns instead of width columns : false, // true to build columns once regardless of window resize // false to rebuild when content box changes bounds buildOnce : false, // an object with options if the text should overflow // it's container if it can't fit within a specified height overflow : false, // this function is called after content is columnized doneFunc : function(){}, // if the content should be columnized into a // container node other than it's own node target : false, // re-columnizing when images reload might make things // run slow. so flip this to true if it's causing delays ignoreImageLoading : true, // should columns float left or right columnFloat : "left", // ensure the last column is never the tallest column lastNeverTallest : false, // (int) the minimum number of characters to jump when splitting // text nodes. smaller numbers will result in higher accuracy // column widths, but will take slightly longer accuracy : false }; var options = $.extend(defaults, options); if(typeof(options.width) == "string"){ options.width = parseInt(options.width); if(isNaN(options.width)){ options.width = defaults.width; } } return this.each(function() { var $inBox = options.target ? $(options.target) : $(this); var maxHeight = $(this).height(); var $cache = $('
'); // this is where we'll put the real content var lastWidth = 0; var columnizing = false; var adjustment = 0; $cache.append($(this).contents().clone(true)); // images loading after dom load // can screw up the column heights, // so recolumnize after images load if(!options.ignoreImageLoading && !options.target){ if(!$inBox.data("imageLoaded")){ $inBox.data("imageLoaded", true); if($(this).find("img").length > 0){ // only bother if there are // actually images... var func = function($inBox,$cache){ return function(){ if(!$inBox.data("firstImageLoaded")){ $inBox.data("firstImageLoaded", "true"); $inBox.empty().append($cache.children().clone(true)); $inBox.columnize(options); } }}($(this), $cache); $(this).find("img").one("load", func); $(this).find("img").one("abort", func); return; } } } $inBox.empty(); columnizeIt(); if(!options.buildOnce){ $(window).resize(function() { if(!options.buildOnce && $.browser.msie){ if($inBox.data("timeout")){ clearTimeout($inBox.data("timeout")); } $inBox.data("timeout", setTimeout(columnizeIt, 200)); }else if(!options.buildOnce){ columnizeIt(); }else{ // don't rebuild } }); } /** * return a node that has a height * less than or equal to height * * @param putInHere, a dom element * @$pullOutHere, a jQuery element */ function columnize($putInHere, $pullOutHere, $parentColumn, height){ while($parentColumn.height() < height && $pullOutHere[0].childNodes.length){ $putInHere.append($pullOutHere[0].childNodes[0]); } if($putInHere[0].childNodes.length == 0) return; // now we're too tall, undo the last one var kids = $putInHere[0].childNodes; var lastKid = kids[kids.length-1]; $putInHere[0].removeChild(lastKid); var $item = $(lastKid); if($item[0].nodeType == 3){ // it's a text node, split it up var oText = $item[0].nodeValue; var counter2 = options.width / 18; if(options.accuracy) counter2 = options.accuracy; var columnText; var latestTextNode = null; while($parentColumn.height() < height && oText.length){ if (oText.indexOf(' ', counter2) != '-1') { columnText = oText.substring(0, oText.indexOf(' ', counter2)); } else { columnText = oText; } latestTextNode = document.createTextNode(columnText); $putInHere.append(latestTextNode); if(oText.length > counter2){ oText = oText.substring(oText.indexOf(' ', counter2)); }else{ oText = ""; } } if($parentColumn.height() >= height && latestTextNode != null){ // too tall :( $putInHere[0].removeChild(latestTextNode); oText = latestTextNode.nodeValue + oText; } if(oText.length){ $item[0].nodeValue = oText; }else{ return false; // we ate the whole text node, move on to the next node } } if($pullOutHere.children().length){ $pullOutHere.prepend($item); }else{ $pullOutHere.append($item); } return $item[0].nodeType == 3; } function split($putInHere, $pullOutHere, $parentColumn, height){ if($pullOutHere.children().length){ $cloneMe = $pullOutHere.children(":first"); $clone = $cloneMe.clone(true); if($clone.prop("nodeType") == 1 && !$clone.hasClass("dontend")){ $putInHere.append($clone); if($clone.is("img") && $parentColumn.height() < height + 20){ $cloneMe.remove(); }else if(!$cloneMe.hasClass("dontsplit") && $parentColumn.height() < height + 20){ $cloneMe.remove(); }else if($clone.is("img") || $cloneMe.hasClass("dontsplit")){ $clone.remove(); }else{ $clone.empty(); if(!columnize($clone, $cloneMe, $parentColumn, height)){ if($cloneMe.children().length){ split($clone, $cloneMe, $parentColumn, height); } } if($clone.get(0).childNodes.length == 0){ // it was split, but nothing is in it :( $clone.remove(); } } } } } function singleColumnizeIt() { if ($inBox.data("columnized") && $inBox.children().length == 1) { return; } $inBox.data("columnized", true); $inBox.data("columnizing", true); $inBox.empty(); $inBox.append($("")); //" $col = $inBox.children().eq($inBox.children().length-1); $destroyable = $cache.clone(true); if(options.overflow){ targetHeight = options.overflow.height; columnize($col, $destroyable, $col, targetHeight); // make sure that the last item in the column isn't a "dontend" if(!$destroyable.contents().find(":first-child").hasClass("dontend")){ split($col, $destroyable, $col, targetHeight); } while(checkDontEndColumn($col.children(":last").length && $col.children(":last").get(0))){ var $lastKid = $col.children(":last"); $lastKid.remove(); $destroyable.prepend($lastKid); } var html = ""; var div = document.createElement('DIV'); while($destroyable[0].childNodes.length > 0){ var kid = $destroyable[0].childNodes[0]; for(var i=0;i