砌体，WordPress的循环和引导

我正在建立一个WordPress的网站使用引导，我想创建一个精选的工作部分在我的主页上使用石工来显示我最近3个投资组合项目的缩略图和标题。砌体，WordPress的循环和引导

我希望将投资组合项目以看起来随机的方式放置（类似于：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; }

任何帮助，将不胜感激！

来源

2016-04-20 Svet S.

比方说，你有列宽3个不同的类别：

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

一个可能的解决方案是这3类添加到你的CSS文件，并随机之后.MS-项目分配的类之一，您的容器类。砌体会给你添加到该容器的最后一个班的宽度。例如：

<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">

T他的意志将为这3个项目提供一个独特的宽度。

来源

2016-04-20 22:34:52 neoprez

谢谢！这有点接近我想要的。但是有时候，所有三个缩略图都分配了相同的宽度，并且显示在一列中。有没有办法避免这种情况？也许像总是分配第一个项目宽度1，第二个项目宽度2等等？ –

当然！看到更新。 – neoprez

砌体，WordPress的循环和引导

回答

相关问题