La mampostería de jquery se colapsa en la carga de la página inicial, funciona bien después de hacer clic en el botón de menú "Inicio"

La configuración de la mampostería de mi jquery funciona de forma extraña en la carga de la página inicial. Parece estar colocando bien las imágenes en la primera fila, la segunda fila se coloca solapando la primera y la misma para la tercera fila. Después de cargar la página, puede hacer clic en el botón de inicio o en el logotipo, volver a cargar la página y funciona bien.

Tengo este código en functions.php para poner los scripts de albañilería y jquery en:

if (!is_admin()) {
    wp_enqueue_script('jquery');
    wp_register_script('jquery_min', get_template_directory_uri(). '/js/jquery.min.js', array('jquery'), '1.6.1' );
    wp_enqueue_script('jquery_min');
    wp_enqueue_script('jquery');
    wp_register_script('jquery_masonry', get_template_directory_uri(). '/js/jquery.masonry.min.js', array('jquery'), '2.1.06' );
    wp_enqueue_script('jquery_masonry');
}

Este script está en el head.php:

<?php if (is_page(2)) { ?>
    <script>
        $(function(){
            $('#content').masonry({
                // options...
                itemSelector : '.product',
                columnWidth : 310,
                isAnimated: true,
                animationOptions: {
                    duration: 700,
                    easing: 'linear',
                    queue: false
                }
            });
        });
    </script>
<?php } ?>

Este es un enlace a lasitio.

¿Alguna idea de por qué esto se carga de forma extraña en la carga de la página inicial?

Soy bastante nuevo en escribir algo, así que por favor sea amable.

Respuestas a la pregunta(2)

Su respuesta a la pregunta