Ví dụ Sử dụng sẵn thư viện masonry của wordpres (ok)

https://masonry.desandro.com/#getting-started

Hãy học cách sử dụng

C:\xampp\htdocs\wordpress3\wp-content\themes\masonry-blog\assets\js\theme.js

1MB

masonry-blog.zip

archive

Open

/*
        ===========================
        = Image Lazyload Initialization
        ====================================
        */

        $('.lazy-bg-img, .img-lazyload').lazy({
            enableThrottle: false,
        });

        $(".lazy-img").Lazy({
            effect: "fadeIn",

            afterLoad: function(element) {

                element.removeClass('lazy-img');

                element.parent( '.image-container' ).css( 'background-image', 'none' );

                masonry_grid.imagesLoaded().progress(function() {
                    masonry_grid.masonry({
                        itemSelector: '.masonry-article',
                        transitionDuration: 0,
                        percentPosition: true,
                        stagger: 0,
                    });
                });

                masonry_grid.masonry({
                    itemSelector: '.masonry-article',
                    transitionDuration: 0,
                    percentPosition: true,
                    stagger: 0,
                });
            }
        });

C:\xampp\htdocs\wordpress4\wp-content\themes\twentytwentyone\functions.php

function enqueue_masonry() {
   wp_enqueue_style( 'custom', get_template_directory_uri() . '/assets/css/custom.css', false );
   wp_enqueue_script('masonry');
   wp_enqueue_script( 'lazy', get_template_directory_uri() . '/assets/js/jquery.lazy.js', array( 'jquery' ), '1.7.10', true );
   wp_enqueue_script( 'custom', get_template_directory_uri() . '/assets/js/custom.js', array( 'jquery' ), '1.7.10', true );
}
add_action('wp_enqueue_scripts','enqueue_masonry');

C:\xampp\htdocs\wordpress4\wp-content\themes\twentytwentyone\assets\js\custom.js

jQuery(document).ready(function($) {
  $('.grid').masonry({
    itemSelector: '.grid-item',
    columnWidth: 400
  });
});

C:\xampp\htdocs\wordpress4\wp-content\themes\twentytwentyone\assets\css\custom.scss

.grid-item {
  width: 400px;
}

C:\xampp\htdocs\wordpress4\wp-content\themes\twentytwentyone\header.php

<main id="main" class="site-main grid" role="main">

C:\xampp\htdocs\wordpress4\wp-content\themes\twentytwentyone\template-parts\content\content.php

<article id="post-<?php the_ID(); ?>" <?php post_class('grid-item'); ?>>

Kết quả: