Встроенные столбцы разной высоты с использованием Masonry jQuery не работают - PullRequest
Новая
       13

Встроенные столбцы разной высоты с использованием Masonry jQuery не работают

0 голосов
/ 14 мая 2019

У меня есть несколько div-ов, создающих сетку на моей странице. Ширина каждого div устанавливается с помощью начальной загрузки, чтобы все одинаково были одинаковыми, в этом случае добавляется класс 'col-md-3', чтобы сделать каждые 25% ширины страницы. Каждый div имеет высоту 400px или 800px. Вот где у меня проблема.

В соответствии с этим вопросом решение 5 - это то, что мне нужно сделать, чтобы достичь требуемого эффекта: Строка начальной загрузки со столбцами разной высоты

Я следил за второй демонстрацией, однако, у меня нет ошибок, и у меня все еще есть смещение в моем шаблоне сетки, кто-то может посоветовать?

Я заметил, что абсолютное положение было добавлено к каждому элементу div, он делает их слоем друг над другом вместо того, чтобы находиться в сетке? 

<div class="blockOut row">
    <div class="col-md-3 blocks short">
    </div>
    <div class="col-md-3 blocks short">
    </div>
    <div class="col-md-3 blocks tall">
    </div>
    <div class="col-md-3 blocks short">
    </div>
    <div class="col-md-3 blocks short">
    </div>
    <div class="col-md-3 blocks tall">
    </div>
    <div class="col-md-3 blocks short">
    </div>
    <div class="col-md-3 blocks short">
    </div>
</div>

.blockOut {
    margin-top: 7.5vh;
}

.blocks {
    cursor: pointer;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: .5s ease-in-out;
}

$( document ).ready(function() {
    $('.row').masonry({
      itemSelector : '.col-md-3'
   });
});

1 Ответ

0 голосов
/ 14 мая 2019

В вашем коде display:none; сделает все с классом .blocks невидимым.Если вы работаете в линию с другой группой блоков, возможно, вы смотрите не на ту группу.Некоторые из других атрибутов CSS для вашего .blocks класса не делают ничего полезного, если только это не отрывок из более крупного проекта.

Я также вижу некоторый пользовательский CSS для класса .row в демоверсии, которыйВы не включили сюда, хотя вы используете класс в своем шаблоне.Атрибут background-clip: content-box; предотвращает перекрытие блоков. 

.row [class*='col-'] {
  background-color: #cceeee;
  background-clip: content-box;
  min-height: 200px;
  margin-bottom: 24px;
}

В противном случае предоставленный вами код корректно отображается для меня.

...