JSFiddle - React, Tailwind, and code Playground

by web designer

HTML

<div class="container">
    <div class="items clearfix">
        <div class="latest"><div class="item">1</div></div>
        <div class="latest"><div class="item">2</div></div>
        <div class="latest"><div class="item">3</div></div>
        <div class="latest"><div class="item">4</div></div>
        <div class="latest"><div class="item">5</div></div>
        <div class="latest"><div class="item">6</div></div>
    </div>
    <div id="sample-data" style="display: none;">
        <div class="latest"><div class="item">7</div></div>
        <div class="latest"><div class="item">8</div></div>
        <div class="latest"><div class="item">9</div></div>
        <div class="latest"><div class="item">10</div></div>
        <div class="latest"><div class="item">11</div></div>
         <div class="latest"><div class="item">12</div></div>
    </div>
</div>

CSS

.container{
    width:900px;
    margin:0 auto;
}
.latest{
    float:left;
    width:250px;
    margin-right:10px;
    margin-bottom:10px;
    border:1px solid red;
    
}
.item{
    border:1px solid #ddd;
    font-size:50pt;
    line-height:500px;
    background-color:#f0f0f0;
    text-align:center;
}
.pageSeparator{
    border:1px solid #ddd;
    padding:20px;
    color:red;
}
.clearfix{
    clear:both;
}
.clearfix:after{
    content:"";
    clear:both;
    display:table;
}
.hidden{
    display:none;
}

JavaScript

var flg = true;
$(window).scroll(function(e) {
    if ($(window).scrollTop() > $(document).height() - $(window).height() - 500 && flg) {
        flg = false;
        var cnt = $("#sample-data").children().length - 1;
        $(".items .lastPostsLoader").addClass("hidden");
        $("#sample-data").children().each(function(i) {
            $(this).clone().appendTo("div.items:not(.noChange)").removeAttr('style');
            if (cnt == i) {
                flg = true;
            }
        });
    }
});