This shouldn’t be a problem with Masonry, at least I never had one with it (or its similar equivalent Isotope). Actually it is just the beauty of those libraries that you are able to have this kind of layout. The rest comes down to the right CSS styles. I don’t know how you apply your counter/index class, but I would do it like shown below:
function wpse151589_indexed_post_class( $classes ) {
global $wp_query;
// the current_post property value starts counting at 0
// we are doing + 1 to start from 1
$index = $wp_query->current_post + 1;
// if you want the number to always have 3 digits
// like 001, uncomment the next line
//$index = sprintf( '%1$03d', $index );
// results in classes like post-nr-1/001
$classes[] = 'post-nr-' . $index;
return $classes;
}
add_filter( 'post_class', 'wpse151589_indexed_post_class' );
Edit: Reply to comment
There are some things I like to note,
-
Do not use
query_posts()
There is a reason why even the according codex page states:
This function isn’t meant to be used by plugins or themes. As explained later, there are better, more performant options to alter the main query.
And later on:
And:
It is strongly recommended that you use the
pre_get_posts
filter instead, and alter the main query by checkingis_main_query
The two most informational and outstanding sources for the why are actually located here on WordPress Development, they are absolutely worth the read:
-
That
post_class()
can’t be used outside the loop is not trueThere is even a section about that in the documentation. Granted the codex page for
post_class
isn’t the best there is, but it is clear enough that the function has two parameter, they are:$classes
and$post_id
.post_class( $classes, $post_id );
Which means:
For displaying posts outside the Loop or in an alternate Loop, the second parameter to the post_class function can be the post ID. Classes will then be determined from that post.
This – in addition with the information from 1. – makes it very much possible to use this for your purpose.
-
The
WP_Query
object has a property named$current_post
$current_post
(available during The Loop) Index of the post currently being displayed.It can be used for your purpose, so no need to reinvent the wheel.