我正在使用引导程序构建一个wordpress网站，我想使用砖石在我的主页上创建一个特色工作部分，以显示我最近的3个投资组合项目的缩略图和标题。
我希望投资组合项目以看似随机的方式放置（类似于：http://studiosweep.com/），而不仅仅是有序的网格格式。我不知道如何为我的作品集项目分配不同的宽度，因为它们只是通过 wordpress 循环在特色工作部分生成的。
这是我的 HTML：
<section id="work">
<div class="container-fluid">
<div class="row">
<div class="col-sm-offset-6 col-sm-6 text-center">
<h1>Featured Work</h1>
</div>
</div>
<div class="row" id="ms-container">
<?php query_posts('posts_per_page=3&post_type=work'); ?>
<?php while ( have_posts() ) : the_post();
$thumbnail = get_field('thumbnail');
$medium = get_field('medium');
$size = "large";
?>
<div class="ms-item col-lg-6 col-md-6 col-sm-6 col-xs-12">
<figure>
<a href="<?php the_permalink(); ?>"><?php echo wp_get_attachment_image($thumbnail, $size); ?></a>
</figure>
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<div class="clearfix"></div>
</div>
<?php endwhile; // end of the loop. ?>
<?php wp_reset_query();
</div>
<div class="clearfix"></div>
</div>
</section>
下面是脚本：
<script type="text/javascript">
jQuery(window).load(function() {
// MASSONRY Without jquery
var container = document.querySelector('#ms-container');
var msnry = new Masonry( container, {
itemSelector: '.ms-item',
columnWidth: '.ms-item',
});
});
</script>
至于CSS，我真的不知道如何分配不同的列宽，所以我到目前为止只有这个：
.ms-item {
width: 38.23%;
margin-right: 80px;
margin-bottom: 70px;
}
任何帮助将不胜感激！
假设您有 3 个不同的列宽类：
.ms-item-width-1, .ms-item-width-2, .ms-item-width-3
一个可能的解决方案是将这 3 个类添加到您的 css 文件中，并在 .ms-item 类之后随机将其中一个类分配给您的容器。 砌体将提供您添加到该容器的最后一个类的宽度。例如：
<div class="ms-item <?php echo 'ms-item-width-' . (rand(0, 3) + 1); ?> col-lg-6 col-md-6 col-sm-6 col-xs-12">
<figure>
<a href="<?php the_permalink(); ?>"><?php echo wp_get_attachment_image($thumbnail, $size); ?></a>
</figure>更新：要在不获取重复值的情况下进行随机化，您可以$widths = array(1,2,3);一个数组，然后将该数组洗牌shuffle($widths);，而不是调用随机函数，您将删除数组的元素并将其替换为以下代码：
<div class="ms-item <?php echo 'ms-item-width-' . array_shift($widths); ?> col-lg-6 col-md-6 col-sm-6 col-xs-12">
这将为这 3 个项目提供唯一的宽度。