1

我有个问题。当页面加载时放置照片不是，并且相互叠加。

CSS：

 body {background: #fefefe; color:#333; line-height:200%;}
.item {
    float:left /* ОБЯЗАТЕЛЬНО задаем блокам float */; 
    border:1px solid black;
    -webkit-transition-duration: 0.5s;
            -moz-transition-duration: 0.5s;
        -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

JS：

function ImagesStart(id) {
    var Images = [
        "photes/сайт002",
        "photes/сайт003",
        "photes/сайт004",
        "photes/сайт005",
        "photes/сайт006",
        ];
    for (var i = 0; i < Images.length; i++) {
        $("#" + id).append("<img id = '" + i + "' src = '" + Images[i] + "мал.jpg'class = 'item' onmouseover = 'over(this)' onmouseout = 'out(this)'>")
    }
}

$(document).ready(function() {
    ImagesStart("container");
    $('#container').masonry({
        itemSelector: '.item',
        singleMode: false,
        resizeable: true,
        //isAnimated: !Modernizr.csstransitions
    });
});

和截图。

如果您启动以更改浏览器窗口的大小，则一切正常。有什么问题？

4

1 回答 1

0

您需要使用imagesLoaded插件，它基本上会延迟操作window.load，即在加载所有资产之后：

var $container = $('#container');

$container.imagesLoaded( function(){
  $container.masonry({
    itemSelector : '.box'
  });
});

为了实现这一点，您不应该通过 js 对图像进行 DOM 注入，而是更好地将它们提供到原始 HTML 文档中。

于 2012-11-26T10:25:29.237 回答