元素使用引导和砌体在页面上移动

Elements shift on page using Bootstrap and Masonry

本文关键字:移动 元素      更新时间:2023-09-26

我正在使用Bootstrap和Masonry制作一个网站。一切正常,但是当页面加载时,元素在前 2 秒内从左移动到中心。

我怎样才能使页面立即加载,网格元素完美地位于中心。元素的移动看起来很丑陋。

代码:http://bl.ocks.org/bollwyvl/e77b3c9d3b322e511ecf

网站: http://bl.ocks.org/bollwyvl/raw/e77b3c9d3b322e511ecf/

我正在使用上面的代码。(请刷新网站以查看效果)。

它必须对仅在加载 jQuery 资产后执行的以下代码执行一些操作。有没有解决方法可以使网格元素在网站加载时完美地显示在中心。

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');

用以下内容写一个空白的白色 inde.html 页面

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

http://example.com/替换为此文件名。 0 表示 0 秒后将进行重定向。

希望对您有所帮助。