javascript – 刷新页面砌体工作正常,但第一次重叠

前端之家收集整理的这篇文章主要介绍了javascript – 刷新页面砌体工作正常,但第一次重叠前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
当我的页面加载第一次砌体重叠图像,如果我刷新页面它开始工作正常.我不知道自己做错了什么.我的页面链接是这个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" });
    }

解决方法

我也有类似的问题,图像在第一次加载时重叠.我克服了这一点
首先加载图像.
$(".id").imagesLoaded(function(){
    $('.id').masonry({
                itemSelector: '.scrapcontent',columnWidth: 3,isAnimated:true,animationOptions: {
                    duration: 700,easing:'linear',queue :false
               }
         });
}

如果图像被加载,那么只有你的砖石的责任必须开始.它应该工作正常.

原文链接:https://www.f2er.com/js/155571.html

猜你在找的JavaScript相关文章