php - jQuery Masonry Layout - 如何对齐图像

Question

我构建了一个 jQuery 砌体布局，可以从不同类别中提取最近的帖子并将它们显示在主页上。

我不确定如何修改代码以实现两件事:

1. 移除一些图像下方的白色小间隙，使它们彼此齐平。

2. 对齐图像的底部行，使它们不会悬垂。我希望它们像在顶行一样形成一条整齐的直线。除了仅显示特定尺寸的图像之外，我不确定这是否可行。

这是当前布局:test-page

我希望底行始终以与下图相同的方式对齐:

HTML/jQuery:

<div id="container">
<?php
$recent_posts_query = new WP_Query(array('post_type' => 'post', 
'posts_per_page' => 8, 'category_name' => 'technology', 
'Fashion/Beauty', 'Art', 'Watches/Jewellery', 'Travel',));
 while ($recent_posts_query->have_posts()){
 $recent_posts_query->the_post(); ?>
 <div class="masonryImage"><?php the_post_thumbnail();?></div>
 <?php } ?>
 </div>

 <script type="text/javascript">

    jQuery(window).load(function() {
  var container = document.querySelector('#container');
  var msnry = new Masonry( container, {
    itemSelector: '.masonryImage',
    columnWidth: '.masonryImage',                
  });  

    });


</script>

CSS:

`/* Makes two columns */
 .masonryImage {
 width: 50%;
 }

 /* Makes three columns */
 .masonryImage {
 width: 33%;
 }

 /* Makes four columns */
 .masonryImage {
 width: 25%;
 } `

Answer 1

请试试

.masonryImage img(vertical-align: middle;)