wullerot/columns.html

## columns.html
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <title>Simple js columns test</title>
    <style>
        .js-columns-col {
            display: inline-block;
            vertical-align: top;
        }

        .js-columns-sizer {
            display: none;
            font-size: 3px;
        }

        @media screen and (max-width: 980px) {
            .js-columns-sizer {
                font-size: 2px;
            }
        }

        @media screen and (max-width: 520px) {
            .js-columns-sizer {
                font-size: 1px;
            }
        }
    </style>
</head>
<body>
    <div cass="columns-wrap">
        <h2>Doller Titel</h2>
        <div class="js-columns">
            <div class="plugin-text ckeditor-text">
                <p>Oft unterschätzt und sträflich vernachlässigt: <strong>Blindtexte</strong>! Es muss nicht immer Lorem Ipsum sein. Warum nicht Goethe, Kafka oder ein Pangram? Hier eine Auswahl an Blindtexten und Editoren für Blindtexte.</p>
            </div>
            <div class="plugin-text ckeditor-text">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
            </div>
            <div class="plugin-text ckeditor-text">
                <p>Hallo. Ich bin ein kleiner Blindtext. Und zwar schon so lange ich denken kann. Es war nicht leicht zu verstehen, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Wirklich keinen Sinn. Man wird zusammenhangslos eingeschoben und rumgedreht – und oftmals gar nicht erst gelesen. Aber bin ich allein deshalb ein schlechterer Text als andere? Na gut, ich werde nie in den Bestsellerlisten stehen. Aber andere Texte schaffen das auch nicht. Und darum stört es mich nicht besonders blind zu sein. Und sollten Sie diese Zeilen noch immer lesen, so habe ich als kleiner Blindtext etwas geschafft, wovon all die richtigen und wichtigen Texte meist nur träumen.</p>
            </div>
        </div>
        <span class="js-columns-sizer"></span>
    </div>
    <script src="jquery.js"></script>
    <script src="columns.js"></script>
</body>
</html>

## columns.js
var Columns = ( function ($) {
    'use strict';

    var c;
    var i;
    var $sizer;
    var $doc = $( document );
    var $win = $( window );

    $.fn.columns = plugins;
    $doc.ready( init );

    function init( e ) {
        $( '.js-columns' ).columns();
    };

    function plugins() {
        var s;
        var t;
        var $plugins = this;

        if( $plugins.length > 0 ) {
            $plugins.each( plugin );
            $win.on( 'resize', lazy_resize );
        }

        function lazy_resize() {
            window.clearTimeout( t );
            t = window.setTimeout( resize, 10 );
        };

        function resize() {
            var p;

            window.clearTimeout( t );

            for( i = 0; i < $plugins.length; i ++) {
                p = $plugins[ i ];
                if( p._length != p.__get_amount() ) {
                    p.__set_columns();
                    p.__set_elements();
                }
            };
        };

        return this;
    };

    function plugin() {
        var p = this;

        p.__get_amount = get_amount;
        p.__set_columns = set_columns;
        p.__set_elements = set_elements;

        p.$ = $( this );
        p.$children = p.$.children();
        p.$sizer = $( '.js-columns-sizer', p.$.parent() );

        p.__set_columns();
        p.__set_elements();

        function set_columns() {
            p.$.empty();
            p.$.append( get_coloumns_html( p.__get_amount() ) );
            p.$columns = $( '.js-columns-col', p.$ );
            p._length = p.$columns.length;
        };

        function set_elements() {
            var width = 100 / p._length;
            for( i = 0; i < p.$columns.length; i++ ) {
                p.$columns[ i ].$ = $( p.$columns[ i ] );
                p.$columns[ i ].$.css({ width: width + '%' });
            }
            c = 0;
            for( i = 0; i < p.$children.length; i++ ) {
                if( c >= p._length ) {
                    c = 0;
                }
                $( p.$columns[ c ] ).append( p.$children[ i ] );
                c += 1;
            };
        };

        function get_amount() {
            var fs = p.$sizer.css('font-size');
            var a = parseInt( fs.substring( 0, fs.length - 2 ) );
            if( !a ) {
                a = 1;
            }
            return a;
        };

        return p;
    };

    function get_coloumns_html( amount ) {
        var html = '';
        for ( i = 0; i < amount; i++ ) {
            html += '<div class="js-columns-col js-columns-col-' + ( i + 1 ) +'"></div>';
        }
        return html;
    };

} )( jQuery );

## columns.scss
.js-columns-col {
    display: inline-block;
    vertical-align: top;
}

.js-columns-sizer {
    display: none;
    font-size: 3px;
}

@media screen and (max-width: 980px) {
    .js-columns-sizer {
        font-size: 2px;
    }
}

@media screen and (max-width: 520px) {
    .js-columns-sizer {
        font-size: 1px;
    }
}
	<!DOCTYPE html>
	<html lang="de">
	<head>
	<meta charset="utf-8">
	<title>Simple js columns test</title>
	<style>
	.js-columns-col {
	display: inline-block;
	vertical-align: top;
	}

	.js-columns-sizer {
	display: none;
	font-size: 3px;
	}

	@media screen and (max-width: 980px) {
	.js-columns-sizer {
	font-size: 2px;
	}
	}

	@media screen and (max-width: 520px) {
	.js-columns-sizer {
	font-size: 1px;
	}
	}
	</style>
	</head>
	<body>
	<div cass="columns-wrap">
	<h2>Doller Titel</h2>
	<div class="js-columns">
	<div class="plugin-text ckeditor-text">
	<p>Oft unterschätzt und sträflich vernachlässigt: <strong>Blindtexte</strong>! Es muss nicht immer Lorem Ipsum sein. Warum nicht Goethe, Kafka oder ein Pangram? Hier eine Auswahl an Blindtexten und Editoren für Blindtexte.</p>
	</div>
	<div class="plugin-text ckeditor-text">
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
	</div>
	<div class="plugin-text ckeditor-text">
	<p>Hallo. Ich bin ein kleiner Blindtext. Und zwar schon so lange ich denken kann. Es war nicht leicht zu verstehen, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Wirklich keinen Sinn. Man wird zusammenhangslos eingeschoben und rumgedreht – und oftmals gar nicht erst gelesen. Aber bin ich allein deshalb ein schlechterer Text als andere? Na gut, ich werde nie in den Bestsellerlisten stehen. Aber andere Texte schaffen das auch nicht. Und darum stört es mich nicht besonders blind zu sein. Und sollten Sie diese Zeilen noch immer lesen, so habe ich als kleiner Blindtext etwas geschafft, wovon all die richtigen und wichtigen Texte meist nur träumen.</p>
	</div>
	</div>
	<span class="js-columns-sizer"></span>
	</div>
	<script src="jquery.js"></script>
	<script src="columns.js"></script>
	</body>
	</html>
	var Columns = ( function ($) {
	'use strict';

	var c;
	var i;
	var $sizer;
	var $doc = $( document );
	var $win = $( window );

	$.fn.columns = plugins;
	$doc.ready( init );

	function init( e ) {
	$( '.js-columns' ).columns();
	};

	function plugins() {
	var s;
	var t;
	var $plugins = this;

	if( $plugins.length > 0 ) {
	$plugins.each( plugin );
	$win.on( 'resize', lazy_resize );
	}

	function lazy_resize() {
	window.clearTimeout( t );
	t = window.setTimeout( resize, 10 );
	};

	function resize() {
	var p;

	window.clearTimeout( t );

	for( i = 0; i < $plugins.length; i ++) {
	p = $plugins[ i ];
	if( p._length != p.__get_amount() ) {
	p.__set_columns();
	p.__set_elements();
	}
	};
	};

	return this;
	};

	function plugin() {
	var p = this;

	p.__get_amount = get_amount;
	p.__set_columns = set_columns;
	p.__set_elements = set_elements;

	p.$ = $( this );
	p.$children = p.$.children();
	p.$sizer = $( '.js-columns-sizer', p.$.parent() );

	p.__set_columns();
	p.__set_elements();

	function set_columns() {
	p.$.empty();
	p.$.append( get_coloumns_html( p.__get_amount() ) );
	p.$columns = $( '.js-columns-col', p.$ );
	p._length = p.$columns.length;
	};

	function set_elements() {
	var width = 100 / p._length;
	for( i = 0; i < p.$columns.length; i++ ) {
	p.$columns[ i ].$ = $( p.$columns[ i ] );
	p.$columns[ i ].$.css({ width: width + '%' });
	}
	c = 0;
	for( i = 0; i < p.$children.length; i++ ) {
	if( c >= p._length ) {
	c = 0;
	}
	$( p.$columns[ c ] ).append( p.$children[ i ] );
	c += 1;
	};
	};

	function get_amount() {
	var fs = p.$sizer.css('font-size');
	var a = parseInt( fs.substring( 0, fs.length - 2 ) );
	if( !a ) {
	a = 1;
	}
	return a;
	};

	return p;
	};

	function get_coloumns_html( amount ) {
	var html = '';
	for ( i = 0; i < amount; i++ ) {
	html += '<div class="js-columns-col js-columns-col-' + ( i + 1 ) +'"></div>';
	}
	return html;
	};

	} )( jQuery );