我正试图在网站的主要图像下面实施一个砌体画廊。我甚至不确定我是否接近成功。目前,缩略图在一行中,但只有四行而不是一行,并且它们没有相互填满空白区域,这显然是理想的结果。
这是CSS:
#mason {
width: 950px; /* width of the entire container for the wall */
margin-bottom: 10px;
}
.brick {
width: 20%; /* width of each brick less the padding inbetween */
margin: 0;
display:inline-table;
}
这是HTML:
<div id="mason">
<?php
$temp = $wp_query;
$wp_query= null;
$wp_query = new WP_Query();
$wp_query->query('posts_per_page=100'.'&paged='.$paged);
while ($wp_query->have_posts()) : $wp_query->the_post();
?>
<div class="brick">
<div class="brick_featured_image">
<?php if ( has_post_thumbnail() ) {
$size=75;
?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Click to view: <?php the_title_attribute(); ?>">
<?php the_post_thumbnail( $size ); } ?>
</a>
</div>
</div>
<?php endwhile;?>
<?php $wp_query = null; $wp_query = $temp;?>
</div>
这是我添加到我的functions.php中的内容:
function mason_script() {
wp_enqueue_script( 'jquery-masonry' );
}
add_action( 'wp_enqueue_scripts', 'mason_script' );
这是我添加到页脚的脚本:
<script>
jQuery( document ).ready( function( $ ) {
$( '#mason' ).masonry( { columnWidth: 190 } );
} );
</script>
我按照本网站的步骤操作: http://pastebin.com/y0D0NDSf
目前可以查看所有内容: http://cks.whiterabbitstudio.us/test-3/
提前感谢您的帮助!