jquery - 砌体有空间，但所有单元格的宽度相同

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');

    });
}