砌体有空格，但所有单元格都有相同的宽度。

Question

奇怪的是，砌体缺少了大空间，然而所有的li都有相同的宽度：

​

HTML：

<div class="one-gallery">
    <section class="grid-wrap">
        <ul class="one-grid">
            <li class="grid-sizer"></li><!-- for Masonry column width -->
            <li class="itemMG">
                <figure>
                    <img alt="Img 0 " src="images/1.jpg" >
                    <figcaption><h3> 0 Letterpress asymmetrical</h3><p>Chillwave hoodie ea gentrify aute sriracha consequat.</p></figcaption>
                </figure>
            </li>
            <li class="itemMG">
                <figure>
                    <img alt="Img 0 " src="images/2.jpg" >
                    <figcaption><h3> 1 Letterpress asymmetrical</h3><p>Chillwave hoodie ea gentrify aute sriracha consequat.</p></figcaption>
                </figure>
            </li>
        </ul>
    </section>
</div>

CSS：

.one-gallery ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.one-gallery figure {
    margin: 0;
}

.one-gallery figure img {
    display: block;
    width: 100%;
}
/* Grid style */
.grid-wrap {
    max-width: 1400px;
    margin: 0 auto;
}

.one-grid {
    margin: 0 auto;
}

.one-grid li {
    width: 24%;
    float: left;
    cursor: pointer;
}

.one-grid figure {
    padding: 15px;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

JS:砖石是自动启动的。*砖石包装v4.2.0

它们都有相同的宽度，所以不应该有任何空白。我能做些什么来解决这个问题？

Answer 1

我认为你不使用imagesLoaded https://imagesloaded.desandro.com/。所以你的砌体布局是在加载所有图像之前创建的--这就是为什么你有这个空白。

function isotope_layout(){

    var $container_main_page = jQuery('.masonry_container');

    // MAIN CONTAINER

    $container_main_page.isotope({

        itemSelector: '.post_masonry',
        masonry: {
            layoutMode: 'fitColumns',
            gutter: 0
        },

    });

    $container_main_page.imagesLoaded( function() {

        $container_main_page.isotope('layout');

    });
}