7

私のページが初めて読み込まれると、石積みが画像と重なって、ページを更新すると正常に動作し始めます。私は何が間違っていたのか分かりません。私のページのリンクはこれです www.bhinderblink.com

<script type="text/javascript">
    $(window).load(function () {
        $('#container').masonry({
            // options
            itemSelector: '.box',
            columnWidth: 240,
            isAnimated: true,
             isFitWidth: true,
            animationOptions: {
                duration: 650,
                easing: 'linear',
                queue: false
            }
        });
    });   


</script>

.ajax が成功すると、xmlobject からデータを取得します...

function OnSuccess(response) {
        var xmlDoc = $.parseXML(response.d);
        var xml = $(xmlDoc);

        pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text());

        var pic_infoVar = xml.find("pic_info");

        pic_infoVar.each(function () {
            var customer = $(this);
            //...........

            var $picString = $("<div class='box'><img id='theImg' src='/pic/jas/" + customer.find("pic_name").text() + ".jpg" + "'/><div>Detail2</div></div>");
            $("#container").append($picString).masonry('appended', $picString, true);

        });

        $("#imgloader").hide();
        $("body").css({ "opacity": "100" });
    }
4

2 に答える 2

12

私も同様の問題を抱えています。最初の読み込み時に画像が重なってしまいました。最初に画像をロードすることでこれを克服します。

 $(".id").imagesLoaded(function(){
    $('.id').masonry({
                itemSelector: '.scrapcontent',
                columnWidth: 3,
                isAnimated:true,
                animationOptions: {
                    duration: 700,
                    easing:'linear',
                    queue :false
               }
         });
}

画像がロードされたら、あなたの石積みの義務だけが開始されなければなりません.それはうまくいくはずです.

于 2013-03-21T18:20:41.580 に答える
2

これは、コンテンツ (画像) が完全に読み込まれない前にスクリプトが実行されているためです。したがって、位置決めエラー。

これを試して ：-

<head>
<script>
      $(window).load(function(){
          $('#selector').masonry({
               itemSelector : '.item',
               columnWidth : 200,
               isAnimated: true,
               animationOptions: {
                    duration: 700,
                    easing: 'linear',
                    queue: false
               }
          });
      });
</script>
</head>
于 2016-09-03T12:20:09.413 に答える