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のおかげで、私はこれを行う方法を考え出しました。私は以下に答えを書きましたが、まだ1つの問題が残っています。それは、インターフェース全体が表示されるまでに時間がかかることです。これは理想的ではありません。とにかく、私はこれに取り組みます。もう一度ありがとう、@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 に答える