JSFiddle - React, Tailwind, and code Playground

by ozzon91

HTML

<div class="pl_wrapper">

            <ul class="pl" data-pl='1'>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li>10</li>
            </ul>

</div>

CSS

.pl_wrapper {
    position: relative;
    margin: 20px auto;
    width: 980px;
    height: auto;
}

.pl li {
    color: #fff;
    background-color: cadetblue;
    display: block;
    list-style: none;
    position: absolute;
    top: 178px;
    left: 326px;
    width: 316px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    font-size: 30px;
    font-weight: bold;

    transition: left 400ms ease-in-out 0ms, top 400ms ease-in-out 0ms, -webkit-transform 400ms ease-in-out 0ms;
    -webkit-transition: left 400ms ease-in-out 0ms, top 400ms ease-in-out 0ms, -webkit-transform 400ms ease-in-out 0ms;
    visibility: visible;
    -webkit-transform: none;
    display: list-item;
    opacity: 1;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px 0px;
}

JavaScript

var gutter = 10; // margin left

var accumL = 0,
    accumT = 0,
        l,
        t;


    $('.pl li').each(function() {

        var p = $(this),
            stepW = p.width() + gutter; // gutter расстояние между элементами

        if( accumL + stepW <= 980 ) {
            l = accumL;
            t = accumT;
            accumL += stepW;

        } else {
            accumT += p.height() + gutter;
            l = 0;
            t = accumT;
            accumL = stepW;

        }

        p.css( { left : l+'px', top : t+'px' } );

        console.log( l, t );

    });

    $('.pl li').click(function() {
        $('.pl li').css( { top : 0, left: 0 } );
    });