砌体、WordPress 循环和引导程序

Question

我正在使用 bootstrap 构建一个 wordpress 网站，我想在我的主页上使用 masonry 创建一个特色工作部分，以显示我最近 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; }

任何帮助将不胜感激！

Answer 1

假设您有 3 个不同的列宽类：

.ms-item-width-1, .ms-item-width-2, .ms-item-width-3

一种可能的解决方案是将这 3 个类添加到您的 css 文件中，并在 .ms-item 类之后将您的一个类随机分配给您的容器。 Masonry 将给出您添加到该容器的最后一个类的宽度。例如：

<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 个项目提供唯一的宽度。