gpt4 book ai didi

带有图像的 Jquery 砌体中心布局不适用于加载

转载 作者:行者123 更新时间:2023-12-01 04:17:30 27 4
gpt4 key购买 nike

我正在开发一个业余爱好项目,该项目使用 Jquery masonry 来布局页面中的项目。我使用中心布局,这样无论我有多少项目,它们总是位于页面的中心。事实上,它确实有效。问题是,当页面首次加载时,布局不是居中,而是在页面的左侧。然后它“跳”到所需的布局。

这是我的 URL向你展示我的意思。请注意,突然跳转后布局不“正确”。我想要的是消除跳转,在布局呈现给用户时使布局居中。

我将 ImageLoaded 插件与砌体一起使用。相关代码如下:

$('#elements').imagesLoaded(function(){
$('#elements').masonry({
itemSelector: '.element',
columnWidth: 245,
gutterWidth: 6,
isFitWidth: true,
isAnimated: true
});
});

为了使布局居中,我向 #elements 添加以下规则:

#elements{
margin: 0 auto;
}

如砌体文档所示here .

那么我的问题是什么?感谢您的任何意见。

编辑:

感谢@Bendim,我找到了执行此操作的方法。我已经在下面写下了我的答案,但仍然存在一个问题:整个界面需要一段时间才能呈现出来,这并不理想。无论如何,我会努力解决这个问题。再次感谢@Bendim。

最佳答案

我也遇到了同样的问题。我的解决方案是用砖石元素隐藏 div 并在所有内容引导后将其淡入。没有 javascript 的用户的后备对我来说很重要。

<head>
<title>Example</title>
<style type="text/css">
#elements {
/* hide the elements to avoid jumping */
display: none;
}
</style>
<!-- fallback for people without javascript -->
<noscript>
<style type="text/css">
#elements {
/* overriding the css above */
display: block !important;
}
</style>
</noscript>
</head>
<body>

Your page content…

<!-- load all jquery from google, with fallback to local file -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/jquery-1.7.2.min.js"><\/script>')</script>

<!-- load jQuery plugin that triggers a callback after all images have been loaded -->
<script src="/jquery.imagesloaded.min.js"></script>

<!-- load masonry script -->
<script src="/jquery.masonry.min.js"></script>


<script type="text/javascript">
var options = {
itemSelector: '.element',
columnWidth: 245,
gutterWidth: 6,
isFitWidth: true,
isAnimated: true
};
var $container = $('#elements');
$container.imagesLoaded(function(){
/* div with content fade in */
$('#elements').fadeIn(1000);
/* if all images are loaded it runs the masonry script */
$container.masonry(options);
});
</script>

</body>
</html>

关于带有图像的 Jquery 砌体中心布局不适用于加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13587044/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com