jQuery.Masonry的问题

Question

我有问题。当页面加载时，照片不会相互叠加。

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
    });
});

截图。

如果您启动以更改浏览器窗口的大小，那么一切都很好。有什么问题？

Answer 1

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

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

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

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