JSFiddle - React, Tailwind, and code Playground

by netsi1964

HTML

<div id="doc">     <h1>Here lies a large document Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod neque eaque fuga culpa doloribus adipisci vel explicabo! Nihil ipsa commodi quae voluptates laudantium fugit nam. Itaque veniam iure aliquid harum!</h1>     <em>Which has already been cleaned up with a regex to leave only HTML elements</em>     <p>     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tortor ligula, ultrices vitae congue a, pulvinar vel enim. Cras non ultrices urna.<img src="http://dummyimage.com/300x200" /> Nunc nec justo sit amet est ornare tincidunt. In quam sapien, tempus eget consequat semper, semper ut urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget pellentesque odio. Morbi in ligula augue, quis dapibus odio. Mauris sagittis enim et ligula feugiat commodo. Morbi sit amet arcu tortor, eget imperdiet leo. Aenean mattis neque id turpis aliquam consequat. Donec laoreet posuere massa, ut scelerisque eros viverra nec.     </p>     <p>     Integer volutpat augue in urna viverra rutrum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc facilisis tempus odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam a sem dolor. Nulla facilisi. Nullam libero arcu, adipiscing ac sodales et, viverra quis urna. Mauris vel fringilla purus. Ut nibh magna, pretium vitae ornare sit amet, condimentum id neque. Phasellus tempor lorem lacus, non vehicula dui.     </p>     <p>     Sed ut ante non est porttitor rhoncus ac a magna. Quisque consequat interdum ornare. Sed dictum ultricies ante non aliquam. Cras vulputate nibh a velit tincidunt molestie. Nullam suscipit tincidunt ligula vel fermentum. Etiam a est enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin placerat condimentum augue id tempor. Mauris sed quam sed sapien commodo vestibulum. Phasellus sit amet consectetur libero. Vivamus ut augue nisl....

CSS

#doc {
    display: none;
}
li, ul {
    padding: 0;
    margin: 0;
}
li {
    display: inline-block;
    vertical-align: top;
    width: 450px;
    border: 1px solid black;
    margin: 5px;
    padding: 20px;
    list-style-type: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

JavaScript

var $doc = $('#doc *');
var doc = Array.from($doc);
console.log(doc)
var pageHeight = 700;

var count = 0

while ($doc.length && ++count < 100) {

    var $li = $('<li>');
    $('ul').append($li);

    var min = 0;
    var max = $doc.length;
    var mid;

    console.log('new search');
    console.log(min, max);

    while (max - min > 1) {

        console.log(min, max);

        $li.empty();
        mid = Math.floor((max + min) / 2);
        $li.append($doc.slice(0, mid + 1));
        if ($li.height() > pageHeight) {
            max = mid
        } else {
            min = mid;
        }
    }
    // Output may still be too heigh
    if ($li.height() > pageHeight) {
				$li.empty();
        $li.append($doc.slice(0, mid-1));
				max-=2
        min--
    } 
    
    // Try to fit part of next element

    $li.css({'height':pageHeight});
    $doc.splice(0, min + 1);
}