Масонство - плавающий слева - PullRequest
Новая
       28

Масонство - плавающий слева

0 голосов
/ 26 марта 2020

Я использую кладочную библиотеку JS.

Я установил 4 столбца (ширина 25%) и у меня есть 6 элементов.

Я бы хотел, чтобы 5-й и 6-й элемент плавали слева, начиная из 1-го столбца. Возможно ли это с библиотекой масонства?

Теперь категории 5 и 6 появляются в 3 и 4 колонках. Я хотел бы поместить его под 2-й и 3-й столбец.

Вот мой код:

https://codepen.io/mattkr/pen/GRJwGdN

<ul class="grid">
    <li class="grid-item" ><span>Category 1</span>
    <ul class="sub-menu header-nav__group">
        <li data-deep="2"><a href="">Item</a></li>
        <li data-deep="2"><a href="">Item</a></li>
        <li data-deep="2"><a href="">Item</a></li>
        <li data-deep="2"><a href="">Item</a></li>
        <li data-deep="2"><a href="">Item</a></li>
        <li data-deep="2"><a href="">Item</a></li>
        <li data-deep="2"><a href="">Item</a></li>
        <li data-deep="2"><a href="">Item</a></li>
        <li data-deep="2"><a href="">Item</a></li>
        <li data-deep="2"><a href="">Item</a></li>
        <li data-deep="2"><a href="">Item</a></li>
        <li data-deep="2"><a href="">Item</a></li>
    </ul>
</li>
    <li class="grid-item"><span>Category 2</span>
    <ul data-deep="2" class="sub-menu header-nav__group">
        <li data-deep="2"><a href="">Item</a></li>
        <li data-deep="2"><a href="">Item</a></li>
        <li data-deep="2"><a href="">Item</a></li>
        <li data-deep="2"><a href="">Item</a></li>
        <li data-deep="2"><a href="">Item</a></li>
        <li data-deep="2"><a href="">Item</a></li>
    </ul>
</li>
    <li class="grid-item"><span>Category 3</span>
    <ul data-deep="2" class="sub-menu header-nav__group">
        <li data-deep="2"><a href="">Item</a></li>
        <li data-deep="2"><a href="">Item</a></li>
        <li data-deep="2"><a href="">Item</a></li>
    </ul>
</li>
    <li class="grid-item"><span>Category 4</span>
    <ul data-deep="2" class="sub-menu header-nav__group">
        <li data-deep="2"><a href="">Item</a></li>
        <li data-deep="2"><a href="">Item</a></li>
        <li data-deep="2"><a href="">Item</a></li>
    </ul>
</li>
    <li class="grid-item"><span>Category 5</span>
    <ul data-deep="2" class="sub-menu header-nav__group">
        <li data-deep="2"><a href="">Item</a></li>
        <li data-deep="2"><a href="">Item</a></li>
    </ul>
</li>
    <li class="grid-item"><span>Category 6</span>
    <ul data-deep="2" class="sub-menu header-nav__group">
        <li data-deep="2"><a href="">Item</a></li>
    </ul>
</li>
</ul>
</div>


$('.grid').masonry({
  itemSelector: '.grid-item',
  percentPosition: true,
});
...