Wordpress mosaic tiling for blog posts - php

Question

so I am trying to get my posts to be in a grid layout. I will try and demonstrate best I can with where I am at. So the posts are going to want to be in mosaic tiles. I am using this to achieve it:
http://sapegin.github.io/jquery.mosaicflow/
Now because I am building this locally it is difficult to show a live example. I have placed the files within my Wordpress theme and the html page works as per the files to the mosaic demo, yet when I bring the exact same code into a Wordpress page all of the images just sit down the left hand side and not tiling out.
I have removed my style sheets (it is blank anyway) so there is no conflict there. I have tried moving the link to the jQuery and the Javascript files but still no idea? Perhaps I am missing something?
so here is my homepeage code:
<?php get_header(); ?>
<!--<div id="site-description"><?php bloginfo( 'description' ); ?></div>-->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'entry' ); ?>
<?php comments_template(); ?>
<?php endwhile; endif; ?>
<?php get_template_part( 'nav', 'below' ); ?>
<style>
* {
margin:0;
padding:0;
box-sizing:border-box;
}
body {
font-family:"Helvetica Neue", Arial, sans-serif;
}
.mosaicflow__column {
float:left;
}
.mosaicflow__item {
position:relative;
}
.mosaicflow__item img {
display:block;
width:100%;
max-width:500px;
height:auto;
}
.mosaicflow__item p {
position:absolute;
bottom:0;
left:0;
width:100%;
margin:0;
padding:5px;
background:hsla(0,0%,0%,.5);
color:#fff;
font-size:14px;
text-shadow:1px 1px 1px hsla(0,0%,0%,.75);
opacity:0;
-webkit-transition: all 0.4s cubic-bezier(0.23,1,0.32,1);
-moz-transition: all 0.4s cubic-bezier(0.23,1,0.32,1);
-o-transition: all 0.4s cubic-bezier(0.23,1,0.32,1);
transition: all 0.4s cubic-bezier(0.23,1,0.32,1);
}
.mosaicflow__item:hover p {
opacity:1;
}
</style>
<div class="mosaicflow" data-item-height-calculation="attribute">
<div class="mosaicflow__item">
<img width="300" height="300" src="http://sapegin.github.com/jquery.mosaicflow/img/2012-08-20_5D_1287_Artem_Sapegin.jpg" alt="">
<p>Dessi the Dachshund</p>
</div>
<div class="mosaicflow__item">
<img width="300" height="200" src="http://sapegin.github.com/jquery.mosaicflow/img/2012-08-24_5D_2066_Artem_Sapegin.jpg" alt="">
<p>Tsiri on Baltic Sea</p>
</div>
<div class="mosaicflow__item">
<img width="300" height="300" src="http://sapegin.github.com/jquery.mosaicflow/img/2012-10-21_5D_3178_Artem_Sapegin.jpg" alt="">
<p>Ciyar the Saluki</p>
</div>
<div class="mosaicflow__item">
<img width="300" height="200" src="http://sapegin.github.com/jquery.mosaicflow/img/2012-08-26_5D_2551_Artem_Sapegin.jpg" alt="">
<p>Tsiri Having Fun by the Sea</p>
</div>
<div class="mosaicflow__item">
<img width="300" height="200" src="http://sapegin.github.com/jquery.mosaicflow/img/2012-08-26_5D_2323_Artem_Sapegin.jpg" alt="">
<p>Dessi Meets the Sea</p>
</div>
<div class="mosaicflow__item">
<img width="300" height="200" src="http://sapegin.github.com/jquery.mosaicflow/img/2012-05-19_5D_9670_Artem_Sapegin.jpg" alt="">
<p>Tsiri the Saluki</p>
</div>
<div class="mosaicflow__item">
<img width="300" height="200" src="http://sapegin.github.com/jquery.mosaicflow/img/2012-08-20_5D_1165_Artem_Sapegin.jpg" alt="">
<p>Dessi on a Waterfall</p>
</div>
<div class="mosaicflow__item">
<img width="300" height="200" src="http://sapegin.github.com/jquery.mosaicflow/img/2011-05-28_5D_4035_Artem_Sapegin.jpg" alt="">
<p>Dessi in Dandelion Field</p>
</div>
<div class="mosaicflow__item">
<img width="300" height="300" src="http://sapegin.github.com/jquery.mosaicflow/img/2012-12-09_5D_3758_Artem_Sapegin.jpg" alt="">
<p>New Year Postcard from Tsiri and Ciyar</p>
</div>
<div class="mosaicflow__item">
<img width="300" height="300" src="http://sapegin.github.com/jquery.mosaicflow/img/2012-10-21_5D_3422_Artem_Sapegin.jpg" alt="">
<p>Beautiful Afghan Hound Girl</p>
</div>
<div class="mosaicflow__item">
<img width="300" height="300" src="http://sapegin.github.com/jquery.mosaicflow/img/2012-10-21_5D_3414_Artem_Sapegin.jpg" alt="">
<p>Running Ciyar and Afgan Girl</p>
</div>
<div class="mosaicflow__item">
<img width="300" height="300" src="http://sapegin.github.com/jquery.mosaicflow/img/2012-08-26_5D_2378_Artem_Sapegin.jpg" alt="">
<p>Dessi Walking on a Sea Shore</p>
</div>
</div>
<script src="jquery.mosaicflow.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!--<?php get_sidebar(); ?>-->
<?php get_footer(); ?>

Answer 1

You need to call jQuery before you call the mosaic flow library, that should fix it.