Jquery圬工中心布局图，带图像'；不适用于负载_Jquery_Layout

Jquery圬工中心布局图，带图像'；不适用于负载

jquery layout

Jquery圬工中心布局图，带图像'；不适用于负载,jquery,layout,Jquery,Layout,我正在从事一个爱好项目，该项目使用Jquery砌体来布置我页面中的项目。我使用中心布局，这样无论我有多少个项目，它们始终位于页面的中心。事实上，它是有效的。问题是当页面第一次加载时，布局不是居中的，而是在页面的左侧。然后它“跳转”到所需的布局这是我的答案，让你明白我的意思。请注意，突然跳转后布局不“正确”。我想要的是消除跳转，当布局呈现给用户时，使布局居中我使用带有砌体的ImageLoaded插件。以下是相关代码： $('#elements').imagesLoaded(function()

我正在从事一个爱好项目，该项目使用Jquery砌体来布置我页面中的项目。我使用中心布局，这样无论我有多少个项目，它们始终位于页面的中心。事实上，它是有效的。问题是当页面第一次加载时，布局不是居中的，而是在页面的左侧。然后它“跳转”到所需的布局

这是我的答案，让你明白我的意思。请注意，突然跳转后布局不“正确”。我想要的是消除跳转，当布局呈现给用户时，使布局居中

我使用带有砌体的ImageLoaded插件。以下是相关代码：

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

为了使布局居中，我在#元素中添加了以下规则：

#elements{
margin: 0 auto;
}

如砌体文件所示

那么我的问题是什么？谢谢你的意见

编辑：

多亏了@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>


例子
#元素{
/*隐藏元素以避免跳跃*/
显示：无；
}
#元素{
/*覆盖上面的css*/
显示：块！重要；
}
您的页面内容…
window.jQuery | | document.write（“”）
变量选项={
itemSelector:“.element”，
列宽：245，
排水沟宽度：6，
是的，
我说：是的
};
var$container=$（“#元素”）；
$container.imagesLoaded（函数（）{
/*内容淡入的div*/
$（'元素'）.fadeIn（1000）；
/*如果加载了所有图像，它将运行砌体脚本*/
$container.砌石（可选）；
});

@Bendim给了我一个想法，我想尝试一下。但是当我隐藏#elements div时，我的元素在淡入后重叠。因此，我将隐藏.element div，然后淡入其中。以下是我所做的：

.element {
    display: none;
}

然后在砌体规范之后：

$('#elements).mansory(
    ...
);

$('.element').each(function(i){
    $(this).fadeIn('fast');
});

它工作得很好，完全没有跳跃。

如果您使用固定的高度和宽度渲染图像，它们将不会重叠。我的解决方案是使用php函数

getimagesize（$pathToImage）

，如果你有固定的宽度（例如260px），你只需要使用这个方法

<?php 
$imageInfo = getimagesize($pathToImage);
$originalHeight = $imageInfo[1];
$originalWidth = $imageInfo[0];
$height = (260/$originalWidth) * $originalHeight;
print "<img src='path/to/image.jpg' widht='260px' height='$height'>";
?>

使用此方法打印的图像不会重叠。稍后将使用js加载的图像根本不需要设置高度，因此您只需要为该图像设置固定高度，该图像将由php而不是js渲染。

您是否尝试过为

mainContent

容器指定

宽度。@KristerAndersson我在希望它尽可能流畅之前就这样做了。因此，当我调整页面大小时，我希望项目能够对列设置动画，但仍然保持在pag的中心。如果我指定宽度，那么我就不能这样做。你可以用百分比来设置宽度。@KristerAndersson让我试试~谢谢！但当我隐藏元素时，元素重叠。相反，我隐藏每个元素，然后让它们出现。