Hello,

Currently on my site the jquery masonry is loading quite oddly, it loads all the images first then it sorts itself into position. i want it to load just like it does in pinterest.com.

Please help.

Regards,
Tamea

Jquery Code

jQuery( function($) {

    // Scroll back to top   
    function attBackTopScroll() {

        $( 'a[href=#top]' ).on('click', function() {
            $( 'html, body' ).animate({scrollTop:0}, 'normal');
            return false;
        } );

    }

    // Scroll to comments   
    function attCommentScroll() {

        $( '.comment-scroll a' ).click( function(event) {       
            event.preventDefault();
            $( 'html,body' ).animate( {
                scrollTop: $( this.hash ).offset().top
                }, 'normal' );
        } );

    }


    // Responsive
    function wpexResponsiveNav() {      
        $("<select />").appendTo("#site-navigation");
        $("<option />", {
           "selected": "selected",
           "value" : "",
            "text" : attParams.responsiveMenu
        }).appendTo("#site-navigation select");

        $("#site-navigation a").each(function() {
            var el = $(this);
            if(el.parents('.sub-menu').length >= 1) {
                $('<option />', {
                 'value' : el.attr("href"),
                 'text' : '- ' + el.text()
                }).appendTo("#site-navigation select");
            }
            else if(el.parents('.sub-menu .sub-menu').length >= 1) {
                $('<option />', {
                 'value' : el.attr('href'),
                 'text' : '-- ' + el.text()
                }).appendTo("#site-navigation select");
            }
            else {
                $('<option />', {
                 'value' : el.attr('href'),
                 'text' : el.text()
                }).appendTo("#site-navigation select");
            }
        }); 
        $("#site-navigation select").change(function() {
          window.location = $(this).find("option:selected").val();
        });     
    }

    // Masonry Widths
    function attMasonry() {

        // **** browsers
        if ($.browser.msie && parseInt($.browser.version, 10) === 8) {

            $('.grid').masonry({
                    itemSelector: '.loop-entry',
                    gutterWidth : 30,
                    columnWidth: 300,
                    isAnimated: false
            });

        // Decent browsers      
        } else {

            var $windowWidth = $(window).width();
            var $gridWidth = $('.grid').width();

            if ( $windowWidth > 700 && $windowWidth <= 1024) {
                var $colWidth = ( $windowWidth - 120 ) / 3;
                 $('.grid').masonry({
                    itemSelector: '.loop-entry',
                    gutterWidth : 20,
                    columnWidth: $colWidth,
                    isAnimated: false
                });
                $('.loop-entry').width( $colWidth );


            } else if ( $windowWidth > 400 && $windowWidth < 700 ) {
                var $colWidth = ( $windowWidth - 100 ) / 2;
                $('.grid').masonry({
                    itemSelector: '.loop-entry',
                    gutterWidth : 20,
                    columnWidth: $colWidth,
                    isAnimated: false
                });
                $('.loop-entry').width( $colWidth );

            } else {
                $('.grid').masonry({
                    itemSelector: '.loop-entry',
                    gutterWidth : 30,
                    columnWidth: 300,
                    isAnimated: false
                });
                $('.loop-entry').width(300);
            }
        }
    }


    $(document).ready(function(){
        attBackTopScroll();
        attCommentScroll();
        attMasonry();
        wpexResponsiveNav();
    });


    $(window).load(function(){
        attMasonry();
    });


    $(window).resize(function() {
        attMasonry();
    });

    if (document.addEventListener){
        window.addEventListener("orientationchange", function() {
            attMasonry();
        });

        window.addEventListener("resize", function() {
            attMasonry();
        });
    }


});

I've just recreated your code, and I'm getting a big error:

Line 65 "jQuery.browser was removed in jQuery 1.9"

Maybe should look into this, as it may well affect that entire IF statement, hence your script isn't running smoothly.

Hello,
I am really sorry, i am a noob when it comes to jquery, you mean i should remove line 65 for this to work right?
-Tamea

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.