Макет сетки не работает с плагином jQuery, потому что высота элементов сетки уменьшена до 0 - PullRequest
Новая
       46

Макет сетки не работает с плагином jQuery, потому что высота элементов сетки уменьшена до 0

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

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

Когда мы инициализируем плагин, все элементы сетки обнуляются по высоте.

Этот вопрос , этот и этот похожи, но не помогли.

Для тестирования мы вручную ждем всехзагружаемые изображения затем вызывают скрипт инициализации плагина следующим образом: 

function initMasonryLayout() {
    $("#mainBox").masonry({
      itemSelector: ".itemBox",
      columnWidth: 200
    });
}

Упрощенный HTML для контейнера сетки (#mainBox) и элементов сетки (.itemBox): 

<div id="mainBox">
            <a href="/design/iphone_xs_max?id=15" class="itemBox">
                <img class="thumbnail" src="/designs/thumbnails/iphone_xs_max/15.jpg" alt="Template for Iphone Xs Max">
                <div class="customize">
                    <span>CUSTOMIZE</span>
                </div>
            </a>
            <a href="/design/iphone_xs_max?id=16" class="itemBox">
                <img class="thumbnail" src="/designs/thumbnails/iphone_xs_max/16.jpg" alt="Template for Iphone Xs Max">
                <div class="customize">
                    <span>CUSTOMIZE</span>
                </div>
            </a>
</div>

CSS дляконтейнер сетки (#mainBox) и элементы сетки (.itemBox): 

#mainBox {
    flex-grow: 1;
    display: grid;
    width: 100%;
    height: 100%;
    padding: 25px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-auto-rows: 1fr;
    grid-gap: 25px;
    box-sizing: border-box;
}


.itemBox {
    position: relative;
    box-sizing: border-box;
    max-width: 250px;
    border: 1px solid #E0E0E0;
    border-radius: 5px;
    transition: 0.5s ease;
    box-shadow: 0 2px 3px rgba(188, 188, 188, .2);
    overflow: hidden;
    position: relative;
    cursor: pointer;
}


.itemBox:before {
content: "";
display: block;
padding-top: 150%;
}


.itemBox:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, .2);
}

Чтобы воспроизвести проблему, посетите https://myhotpot.io, и после загрузки страницы вызовите функцию initMasonryLayout изконсоль разработчика.

...