JSFiddle - React, Tailwind, and code Playground

by kidino

HTML

<div id="wid"></div>
<div id="bk">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget eros nibh, et ornare lorem. Sed vel nibh ac enim vehicula pharetra at a turpis. Praesent eget orci et dui sollicitudin tempus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc nunc elit, eleifend sit amet faucibus at, dignissim eget sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sem tellus, luctus eget scelerisque nec, semper sit amet sem. Ut semper, nibh non vehicula pellentesque, leo urna ultricies elit, sed tempor lectus purus non ligula.
</p>
    <img src="http://newsletter.ctbuh.org/images/07-03/p21.jpg">
<p>
Sed vitae pulvinar arcu. Nunc massa erat, aliquam ut ultrices a, consequat ut augue. Sed nisl nisl, hendrerit non dignissim ut, tempor et arcu. Maecenas at blandit diam. Vivamus lectus est, posuere ut pellentesque at, scelerisque sed augue. Sed id mattis metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p>
Mauris at consequat nisl. Vivamus et arcu sit amet lacus rhoncus congue id ac turpis. Sed fermentum tincidunt pretium. Fusce leo felis, placerat a facilisis vitae, sodales sit amet dui. Fusce bibendum tincidunt hendrerit. Vivamus sodales, leo vulputate tempus interdum, dui sapien pharetra sem, vel ullamcorper mi neque in massa. Donec ut turpis id sapien imperdiet aliquam. Integer pulvinar urna at mi cursus at vulputate metus vehicula. Aliquam erat volutpat. Vivamus elit purus, blandit semper sodales vitae, bibendum vitae nisi. Morbi accumsan massa in arcu porttitor id pellentesque ante hendrerit. Etiam pretium purus ac lorem dictum rhoncus. Mauris ac justo ac magna tincidunt scelerisque non sit amet mi. Sed at libero elit, eget euismod mauris.
</p>
<p>
Cras porttitor, urna non tincidunt fermentum, dolor lectus pharetra diam, ut malesuada velit leo ac neque. Donec in porta urna. Vestibulum euismod nisi...

CSS

body { margin: 0px; padding: 0px; }
div#bk {
    -webkit-column-axis: horizontal;
}
#wid { border: 1px solid #000; }

JavaScript

//var colwidth = parseInt( $('#wid').width()/2 );
var colwidth = 250;
var colgap = 0;
var colheight = 310;

$('#bk img').each(function(){
    if ( $(this).height() > colheight ) {
        $(this).height( colheight - 10);
    }

    if ( $(this).width() > colwidth ) {
        $(this).width( colwidth - 10);
    }
});

$('#bk').css('-webkit-column-width', colwidth + 'px');
$('#bk').css('-webkit-column-gap', colgap + 'px');
$('#bk').height(colheight);

var element = document.getElementById('bk');

var maxScrollLeft = element.scrollWidth;
var numofcols = parseInt((maxScrollLeft + colgap) / (colgap + colwidth));

var real_colwidth = maxScrollLeft / numofcols;

$('#bk').width(real_colwidth);

var maxScrollLeft = element.scrollWidth;


$('#w').html(
    '<br> columns: '+numofcols
    +'<br> real width: '+ maxScrollLeft
    +'<br> real colwidth: '+ real_colwidth
);