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 に答える