砌體，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的循環和引導

回答

相關問題