1

私はこれが何百万回も尋ねられたことを知っています。解決策について他のトピックを調べていますが、これまでのところ修正できません。

ピンタレストやグーグル画像などのグリッドシステムを開発するためにMasonryを使用しています。それは正常に動作します。画像は Firefox では正しく読み込まれますが、Chrome/Safari では、ページを更新するまで画像が重なって表示されます。私のiPhoneでは画像が正常に読み込まれるため、これは奇妙です（ページを更新してオーバーラップするまで）。

また、imagesloaded スクリプトで Firebug が表示するエラーに気付きました。この行。

  } else if ( typeof obj.length === 'number' ) {

これが私のページ設定です。

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>

    <title>Home page</title>
    <meta name="description" content="description here" />
    <link rel="stylesheet" href="css/global.css" media="screen" />
    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
    <!-- external jQuery file to fall back on !-->
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

    <script src="js/masonry.pkgd.min.js"></script>
    <script src="js/imagesloaded.pkgd.js"></script>
    <script>
        var container = document.querySelector('#container');
        var msnry;
        // initialize Masonry after all images have loaded
        imagesLoaded( container, function() {
          msnry = new Masonry( container );
        });
    </script>
</head>
<body>

    <section id="container"  class="js-masonry" data-masonry-options='{ "columnWidth": 30, "itemSelector": ".item" }'>
        <h1 class="hidden">Main Container</h1>
        <div class="item">
            <img src="images/long.jpg">
        </div>
        <div class="item">
            <img src="images/small.jpg">
        </div>
        <div class="item">
            <img src="images/long.jpg">
        </div>
        <div class="item">
            <img src="images/small.jpg">
        </div>
        <div class="item">
            <img src="images/small.jpg">
        </div>
        <div class="item">
            <img src="images/long.jpg">
        </div>
        <div class="item">
            <img src="images/small.jpg"> 
        </div>
        <div class="item">
            <img src="images/long.jpg">
        </div>
        <div class="item">
            <img src="images/small.jpg">
        </div>
    </section>

</body>
</html>

全体として、更新ページでこの重複する問題を修正するにはどうすればよいですか?

ps。ブラウザでは、ctrl + f5 を使用して更新した場合にのみ画像が重なることに注意してください。通常の更新ページでは画像が積み上げられません。

4

1 に答える 1

1

問題は解決しました。

次のスクリプトを追加したところ、正常にリロードされるようになりました。

<script>
    $(window).load(function() {  
        var $container = $('#container');
        $container.masonry({
            itemSelector: '.item'
        });
    }); 
</script>
于 2014-04-30T22:10:34.437 に答える