JSFiddle - React, Tailwind, and code Playground

by cavico

HTML

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

<div class="result"></div>

CSS

ul li {
    float: left;
    margin: 5px;
    border: 1px solid #888;
    width: 80px;
    height: 30px;
}

.result {
    background-color: #ddd;
    margin-top: 10px;
    float: left;
    clear: both;
    width: 100%;    
    padding: 6px;
}

JavaScript

function calculateLIsInRow() {
    var lisInRow = 0;

    // Update: Reset visibility for correct count
    $('ul li').slice( -lisInLastRow ).show();
    
    
    $('ul li').each(function() {
        if($(this).prev().length > 0) {
            if($(this).position().top != $(this).prev().position().top) return false;
            lisInRow++;
        } else {
            lisInRow++;   
        }
    });
    
    var lisInLastRow = $('ul li').length % lisInRow;
    if(lisInLastRow == 0) lisInLastRow = lisInRow;
    
    $('.result').html('No: of lis in a row = ' + lisInRow + '<br>' + 'No: of lis in last row = ' + lisInLastRow  );
    
    // Update: hide elements on last row if length is different of commom row length
    if(lisInLastRow != lisInRow) {
        $('ul li').slice( -lisInLastRow ).hide();
    }
}

calculateLIsInRow();

$(window).resize(calculateLIsInRow);