ozipete on "Create a dynamic list of categories display like a masonry loop"

<disclaimer> I am no expert in this </disclaimer> but here's more on what I did:

The PHP code snippet I gave in above is within a <div> like this:
<div id="categories-and-tags" class="masonry-loop js-masonry">

To make the categories display like masonry blocks, and to tell the site which elements to display like blocks, they have to have a parent div with the class masonry-loop. To activate the loop, the following code is in my header.php:

<script type="text/javascript"> jQuery(window).load(function() { // MASSONRY Without jquery var container = document.querySelector('.masonry-loop'); var msnry = new Masonry( container, { gutter: 20, itemSelector: '.post-container', columnWidth: '.post-container', percentPosition: true, }); }); </script>

Your CSS is identical to mine, and I don't know what your site looks like, but if your's displays differently than mine I think it might be the necessary header script and using the right parent element.

As a bonus here's the code I used to display the tags undeeath. It appears directly under the categories code within the masonry-loop div. (The .home-special tag uses some simple CSS to change the font/background-color)

<div class="home-special post-container hometag"><div class="post"><div class="post-inner">Browse Most Used Tags →</div></div></div> <?php $tags = get_tags(array('orderby' => 'count','number' => '5','order' => 'DESC')); foreach ( $tags as $tag ) { echo '<div class="post-container"><div class="post"><div class="post-inner hometag">'. '<a href="'.get_tag_link($tag->term_id).'">'.$tag->name.'</a>'. '</div></div></div>'; } ?>