javascript - 砌体图片叠加且未正确内联

Question

我有以下 Css、Javascript 和 Html:

/* fluid 5 columns */
.grid-sizer,
.grid-item { 
    width: 20%; 
}
/* 2 columns */
.grid-item--width2 { 
    width: 40%; 
}

JS:

    // init Masonry
var $grid = $('.grid').masonry({
    // set itemSelector so .grid-sizer is not used in layout
    itemSelector: '.grid-item',
    // use element for option
    columnWidth: '.grid-sizer',
    percentPosition: true
});
// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
    $grid.masonry('layout');
});

HTML:

<div class="grid">
<!-- width of .grid-sizer used for columnWidth -->
<div class="grid-sizer"></div>
<div class="grid-item">
    <img src="img/frontpage/girl.jpg"alt="recent project">
</div>
<div class="grid-item">
    <img src="img/frontpage/mid.png">
</div>

如您所见，图像相互重叠而不是正确内联。

谁能告诉我我做错了什么？

Answer 1

您只需要使用更大的网格元素类 .grid-item--width2(我无法加载砌体，但 html 会告诉您我的意思):

    // init Masonry
var $grid = $('.grid').masonry({
    // set itemSelector so .grid-sizer is not used in layout
    itemSelector: '.grid-item',
    // use element for option
    columnWidth: '.grid-sizer',
    percentPosition: true
});
// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
    $grid.masonry('layout');
});

/* fluid 5 columns */
.grid-sizer,
.grid-item { width: 20%; }
/* 2 columns */
.grid-item--width2 { width: 40%; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.0.0/masonry.pkgd.min.js"></script>

<div class="grid">
<!-- width of .grid-sizer used for columnWidth -->
<div class="grid-sizer"></div>
<div class="grid-item">
    <img src="http://placehold.it/200x200"alt="recent project">
</div>
<div class="grid-item--width2">
    <img src="http://placehold.it/400x400">
</div>