Question

我正在开发一个爱好项目，它使用Jquery砌体在我的页面中布置项目。我使用中心布局，这样无论我有多少项目，它们总是最终位于我的页面中心。事实上，它的工作原理。问题是，当页面首次加载时，布局不会居中，而是位于页面的左侧。然后它“跳”到所需的布局。

这是我的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。

Answer 1

我遇到了同样的问题。我的解决方案是隐藏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>

Answer 2

@Bendim给了我一个想法，我打算尝试一下。但是当我隐藏#elements div时，我的元素在我淡入后重叠了。所以我隐藏了.element div，然后淡入它们。这是我做的：

.element {
    display: none;
}

然后就在砌体代码之后：

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

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

它工作得很好，根本没有跳跃。

Answer 3

如果要渲染具有固定高度和宽度的图像，它们将不会重叠。我的解决方案是使用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。

带图像的Jquery砖石中心布局不适用于载荷

3 个答案: