Enqueue Masonry Gallery

I recently discovered that a justified masonry post layout is built directly into WordPress, but it just needs enqueued to work.

Add this simple snippet in a plugin like Code Snippets or Advanced Scripts to enqueue it:

wp_enqueue_script('masonry');

Then, in your JS, include this (can also be added in Code Snippets or Advanced Scripts):

(function($) {

    // init Masonry
    $('.masonry-gallery').masonry({
        // options
        itemSelector: '.masonry-item',
        gutter: 30,
        percentPosition: true,
        horizontalOrder: true
    });

}(jQuery));

Creating a Justified Masonry Gallery in Oxygen Builder

Using Oxygen Builder, you can create a masonry gallery with the Repeater element.

1. Add a Code Block, and copy/paste the second JS snippet above into the JavaScript.
2. Add a Repeater to your layout, and move it above your Code Block.
3. Set your post type, taxonomy, etc. in the Repeater settings.
4. Add the class .masonry-gallery to the main div inside the repeater (you can use whatever class you like—just make sure it's the same in the JS).
5. Add another div inside of that one.
6. Add the class .masonry-item to this (again... this can be anything, just make sure it matches the class in the JS).
7. Create the layout you'd like for each post or masonry "card."
8. Save the page, and view the frontend.