Masonry, WordPress Loop, and Bootstrap - php

Question

I am building a wordpress site using bootstrap, and I want to create a featured work section on my homepage using masonry to display the thumbnails and titles of my 3 most recent portfolio items.
I would like the portfolio items to be placed in a seemingly random fashion (similar to this: http://studiosweep.com/) rather than just an orderly grid format. I can't figure out how to assign different widths to my portfolio items because they're just being generated in the featured work section via wordpress loop.
Here's my 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>
<?php echo wp_get_attachment_image($thumbnail, $size); ?>
</figure>
<h3><?php the_title(); ?></h3>
<div class="clearfix"></div>
</div>
<?php endwhile; // end of the loop. ?>
<?php wp_reset_query();
</div>
<div class="clearfix"></div>
</div>
</section>
Here's the script:
<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>
As for CSS, I don't really know how to go about assigning the different column widths, so I only have this so far:
.ms-item {
width: 38.23%;
margin-right: 80px;
margin-bottom: 70px;
}
Any help would be appreciated!

Answer 1

Let's say you have 3 different classes for column widths:
.ms-item-width-1, .ms-item-width-2, .ms-item-width-3
A possible solution is to add those 3 classes to your css file and randomly assign one of your classes to your container after .ms-item class. Masonry will give the width of the last class you added to that container. For example:
<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>
<?php echo wp_get_attachment_image($thumbnail, $size); ?>
</figure>
Update: To have a randomized without getting repeated values you could have an array $widths = array(1,2,3); and then shuffle this array shuffle($widths); and instead of calling the random function you would be removing the elements of the array and replace it with the following code:
<div class="ms-item <?php echo 'ms-item-width-' . array_shift($widths); ?> col-lg-6 col-md-6 col-sm-6 col-xs-12">
This will provide an unique width to this 3 items.