Geek Answers Handbook

Offset items on a page using Bootstrap and Freemasonry

I make a site using Bootstrap and Freemasonry. Everything works fine, but when the page loads, during the first 2 seconds the elements move from left to right.

How can I instantly load a page with grid elements in the center. Moving items looks ugly.

Code: http://bl.ocks.org/bollwyvl/e77b3c9d3b322e511ecf

Website: http://bl.ocks.org/bollwyvl/raw/e77b3c9d3b322e511ecf/

I am using the code above. (Please refresh the site to see the effect).

It should do something with the following code, executed only after loading jQuery resources. Is there a way to bypass grid elements in the center when the site loads.

jQuery(window).bind('resize', function () {
    if (!jQuery('#posts').parent().hasClass('container')) {
        // Resets all widths to 'auto' to sterilize calculations

        post_width = jQuery('#post').width() + gutter;
        jQuery('#posts, body > #grid').css('width', 'auto');
        // Calculates how many .post elements will actually fit per row. Could this code be cleaner?

        posts_per_row = jQuery('#posts').innerWidth() / post_width;
        floor_posts_width = (Math.floor(posts_per_row) * post_width) - gutter;
        ceil_posts_width = (Math.ceil(posts_per_row) * post_width) - gutter;
        posts_width = (ceil_posts_width > jQuery('#posts').innerWidth()) ? floor_posts_width : ceil_posts_width;
        if (posts_width == jQuery('#post').width()) {
            posts_width = '100%';
        }
        // Ensures that all top-level elements have equal width and stay centered

        jQuery('#posts, #grid').css('width', posts_width);
        jQuery('#grid').css({'margin': '0 auto'});
    }
}).trigger('resize');
+4
1

inde.html

<meta http-equiv="refresh" content="0; url=http://example.com/" />

http://example.com/ . 0 , 0 .

, .

0

More articles:


All Articles