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

Question

奇怪的是，砌体缺少大空间，但所有var myapp = angular.module('myapp', []); myapp.controller('FirstCtrl', function ($scope) { $scope.selectedRegione = 'Mike'; $scope.DayType =[ {DayValue: '10D' , DayDisplay: '10 Day'}, {DayValue: '20D' , DayDisplay: '20 Day'}, {DayValue: '30D' , DayDisplay: '30 Day'} ]; }); 都有相同的宽度：

HTML：

li

CSS：

<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>

JS： 砌体自动启动。  * Masonry PACKAGED 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');

    });
}