2

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

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

我将 ImageLoaded 插件与砖石一起使用。以下是相关代码：

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

为了使布局居中，我将以下规则添加到#elements：

#elements{
margin: 0 auto;
}

正如此处的砌体文件所示。

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

编辑：

感谢@Bendim，我想出了办法。我已经在下面写了我的答案，但还有一个问题：整个界面需要一段时间才能呈现出来，这并不理想。无论如何，我会为此努力。再次感谢@Bendim。

4

3 回答 3

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>
于 2012-12-02T23:50:16.440 回答
1

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

.element {
    display: none;
}

然后在砌体代码之后：

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

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

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

于 2012-12-03T03:10:55.867 回答
0

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

于 2015-02-04T10:50:25.043 回答