Сетка кладки становится выше после того, как я вставлю новый элемент сетки - PullRequest
Новая
       10

Сетка кладки становится выше после того, как я вставлю новый элемент сетки

0 голосов
/ 12 ноября 2018

Я пытаюсь создать очень простой макет сетки с Masonry.js здесь. По сути, я хочу динамически добавить новый элемент сетки в мою сетку. Это работает нормально, за исключением одной странной проблемы, которую я вижу, независимо от того, как я пытаюсь это реализовать. Когда я добавляю новый элемент, элемент, который был первым в списке и полностью слева, перемещается в крайнюю правую часть сетки, и между первым и вторым элементами появляется пробел.

Перед добавлением чего-либо моя сетка выглядит следующим образом

enter image description here

С этой структурой для html 

        <div id="session-holder">
                <div class="grid">
                    <div id="add-session" class="grid-item"><img src="Icons/add-orange.png"></div>
                    <div class="grid-item"></div>
                    <div class="grid-item"></div>
                    <div class="grid-item"></div>
                    <div class="grid-item"></div>
        </div>

JS 

var element = document.querySelector(".grid")
var layout = new Masonry(element, {
    itemSelector : ".grid-item",
    fitWidth: true,
})

CSS 

#session-holder{
    height: fit-content;
}
.grid{
    width: 540px;
}
#add-session{
    border-width: 3px;
    box-sizing: border-box;
    border-style: solid;
    border-color: #ff7c4d;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    transition: opacity 1s linear;
}
#add-session:hover{
    opacity: .7;
}
#add-session:hover > img{
    transform: rotateZ(90deg);
}
#add-session > img{
    transition: transform .2s linear;
    height: 50px;
    width: 50px;
}
#next-session{
    background-color: transparent;
    border-color: orangered;
    border-width: 2px;
    border-style: solid;
    box-sizing: border-box;
}
.grid-item{
    background-color: #333333;
    border-radius: 2px;
    height: 130px;
    width: 160px;
    margin: 5px;
}

После добавления элемента сетка выглядит следующим образом ...

enter image description here

Как и ожидалось, новый элемент сетки заполняет последнее место, но теперь у меня также есть этот гигантский пробел наверху, чтобы иметь дело с ним. Пространство, вставленное вверху, похоже, имеет ту же высоту, что и один ряд элементов сетки (вероятно, не случайно).

Я мог бы просто использовать сетки CSS для достижения того же внешнего вида, но мне нравится, что элементы сетки масонства анимированы (это то, что я действительно не хочу пытаться воспроизвести).

В документации Мейсонри я искал решение или возможное объяснение, но не нашел курящего пистолета.

Есть идеи?

...