jQuery colonize V0.8 : In-between titles Multicols paragraphes

Traversing and wraping P inside H(x), wrapping them with a DIV. Colonize the DIV with CSS3...

by molokoloco

HTML

<!--//
    
    UPDATED HERE !!!! http://jsfiddle.net/molokoloco/FK7xr/
    
//-->
<p>In-between titles Multicols P demo, click here : <a href="#" id="colonize"><b>COLONIZE</b></a> !</p>
<div id="container">
    <h2>Titre 1</h2>
    <p>AAAA AAAA AAAA AAAA AAAA AAAA AAAA AAAA AAAA AAAA AAAA AAAA</p>
    <p>BBBB BBBB BBBB BBBB BBBB BBBB BBBB BBBB BBBB BBBB</p>
    <h2>Titre 2</h2>
    <p>CCCCC CCCCC CCCCC CCCCC CCCCC CCCCC CCCCC CCCCC CCCCC CCCCC</p>
    <p>DDDDDD DDDDDD DDDDDD DDDDDD DDDDDD DDDDDD DDDDDD DDDDDD</p>
    <p>EEEE EEE EEE EEE</p>
    <p>FFF FFF FFF</p>
    <p>GGGGG GGGGG GGGGG</p>
    <div>I'am NOT a P, i'am div</div>
    <p>Add me tooo<br />Add me toooAdd me toooAdd me toooAdd me toooAdd me tooo</p>
    <p>HHHH HHHH HHHH HHHH HHHH</p>
    <ul>
        <li>I'am a li</li>
        <li>I'am a li</li>
    </ul>
    <p>IIIIiiiii iiii IIIIiiiii iiii IIIIiiiii iiii IIIIiiiii iiii IIIIiiiii iiii</p>
    <p>JJJ ii JJJ ii JJJ ii JJJ ii JJJ ii</p>
    <h2>Titre 3</h2>
    <p>Une seule ligne nothing to do</p>
    <h2>Titre 3 Bis</h2>
    <p>Une seule ligne longue do do do Une seule ligne longue do do do Une seule ligne longue do do do Une seule ligne longue do do do Une seule ligne longue do do do Une seule ligne longue do do do </p>
    <h2>Titre 3 Ter</h2>
    <br />
    <p>EEEEEEE EEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEE</p>
    <p>FFFFFF FFFFFF FFFFFF FFFFFF FFFFFF</p>
    <p>So long... soooooo lonnnng So long... soooooo lonnnng So long... soooooo lonnnng So long... soooooo lonnnng So long... soooooo lonnnng So long... soooooo lonnnng So long... soooooo lonnnng So long... soooooo lonnnng So long... soooooo lonnnng So long... soooooo lonnnng So long... soooooo lonnnng So long... soooooo lonnnng So long... soooooo lonnnng So long... soooooo lonnnng So long... soooooo lonnnng So long... soooooo lonnnng So long... soooooo lonnnng So long... soooooo lonnnng So long... soooooo lonnnng So long... soooooo lonnnng So long... soooooo lonnnng So long... soooooo...

CSS

div {
    outline:1px solid rgba(0,0,0,.4);
    padding:5px;
    margin:5px;
}

h1, h2, h3, h4, h5, h6 {
    -webkit-column-span: all;
       -moz-column-span: all;
        -ms-column-span: all;
         -o-column-span: all;
            column-span: all;
}

.multiplecolumns {
    -webkit-column-width:180px;
       -moz-column-width:180px;
        -ms-column-width:180px;
         -o-column-width:180px;
            column-width:180px;
    /*
    -webkit-column-count:2;
       -moz-column-count:2;
        -ms-column-count:2;
         -o-column-count:2;
            column-count:2;
    */
    -webkit-column-gap: 1px;
       -moz-column-gap: 1px;
        -ms-column-gap: 1px;
         -o-column-gap: 1px;
            column-gap: 1px;
    -webkit-column-rule: 1px dashed rgba(0,0,0,.4);
       -moz-column-rule: 1px dashed rgba(0,0,0,.4);
        -ms-column-rule: 1px dashed rgba(0,0,0,.4);
         -o-column-rule: 1px dashed rgba(0,0,0,.4);
            column-rule: 1px dashed rgba(0,0,0,.4);
    -webkit-column-fill: auto;
       -moz-column-fill: auto;
        -ms-column-fill: auto;
         -o-column-fill: auto;
            column-fill: auto;
    
    outline:1px dashed rgba(0,0,0,.4);
    background:rgba(255, 192, 203, 0.4);
    padding:10px 0;
}

.multiplecolumns p {
    margin:0 10px;
    text-align: justify;
}

p, div {
    font:12px verdana, arial;
    line-height: 125%;
}

JavaScript

(function($) {
    
    /* 
    
    UPDATED HERE !!!! http://jsfiddle.net/molokoloco/FK7xr/
    
    */
    
    // jQuery colonize V0.8.2 : In-between titles Multicols paragraphes
    // Molokoloco 2013 - Copyleft
    // Live fiddle : http://jsfiddle.net/molokoloco/Ra288/
    // Github : https://github.com/molokoloco/FRAMEWORK/blob/master/jquery.plugins/jquery.colonize.js
    //          https://github.com/molokoloco/FRAMEWORK/blob/master/jquery.plugins/jquery.colonize.css
    // Infos : http://www.b2bweb.fr/molokoloco/jquery-colonize-plugin-in-between-titles-multicols-paragraphes-with-css3/
    
    $.fn.colonize = function(options) { // Wrapping P between H2
        // Merge user options
        options = $.extend(true, {}, $.fn.colonize.defaults, typeof options == 'object' &&  options);
        
        // Privates vars
        var $container     = null,
            wrapper        = '<div class="'+options.css+'"/>',
            cWidth         = 0,
            colWidth       = 0,
            colHeightRatio = 0,
            intentNextP    = 0,
            lineHeight     = 0;
        
        // private func
        var colsExtractor = function () {
            
            var $this       = $(this),
                $next       = $this.next(),
                $collection = [],
                jumpNext    = false,
                totalHeight = 0;
            
            while ($next) {
                if (!$next.is(options.take)) {
                    if (!$next.is(options.chapters)) jumpNext = true;
                    $next = null; // Break
                }
                else {
                    $collection.push($next);
                    $next = $next.next();
                }
            }
            
            if ($collection.length > 1 || ( $collection.length && $collection[0].outerHeight() > lineHeight) ) {
                var $wrapper = $(wrapper);
                for (var i = 0, len = $collection.length; i < len; i++) {
                   ...