0
私はさまざまなカテゴリの最近の投稿をプルしてホームページに表示するjQueryの石積みレイアウトを構築しました。jQueryの石積みレイアウト - 画像の整列方法
私は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%;
} `