Советы по размещенному графическому плагину для кладки

Question

У меня возникли проблемы с макетированием масонства, чтобы правильно загрузить изображения, я достаточно новичок в javascript и буду благодарен за помощь и совет. Я пробовал imagesLoaded, но у меня проблема с тем, что он работает правильно, главным образом потому, что я не уверен, что правильно помещаю правильный JavaScript.

Вот мой loadedImages Javascript взята с сайта http://imagesloaded.desandro.com/

$('#container').imagesLoaded(function() { 
}); 

$('#container').imagesLoaded({ 

    }, 

function() { 
} 
); 

$('#container').imagesLoaded() 
    .always(function(instance) { 
    console.log('all images loaded'); 
    }) 
    .done(function(instance) { 
    console.log('all images successfully loaded'); 
    }) 
    .fail(function() { 
    console.log('all images loaded, at least one is broken'); 
    }) 
    .progress(function(instance, image) { 
    var result = image.isLoaded ? 'loaded' : 'broken'; 
    console.log('image is ' + result + ' for ' + image.img.src); 
    }); 

Я сохранил это как masonry.js и загрузить его в HTML.

В masonry.pkgd.min.js я написал:

$('.grid').masonry({ 
    // set itemSelector so .grid-sizer is not used in layout 
    itemSelector: '.grid-item', 

    // use element for option 
    columnWidth: '.grid-sizer', 
    percentPosition: true, 

}) 

кирпичную кладку работает, но когда я обновить страницу разрывы макета. Если я настраиваю браузер, он исправляет себя. Вот веб-сайт, чтобы показать вам, что происходит: http://www.elraymond.com/

Опять же, любые советы или указатели, чтобы поставить это право, будут очень оценены.

Благодаря

Answer 1

Я думаю, проблема в том, что не полностью загружены изображения, перед тем кладка становится Кальесами ... может быть, его что-то неправильно в изображениях, загруженные файлы ...

никогда не менее , я не думаю, вам нужна эта библиотека для него ... попробовать создать новый JS-файл со следующим кодом и включить его после кладки файла

$(window).on('load', function(){ 
    $('.grid').masonry({ 
     // set itemSelector so .grid-sizer is not used in layout 
     itemSelector: '.grid-item', 

     // use element for option 
     columnWidth: '.grid-sizer', 
     percentPosition: true, 

    }) 
}); 

чАСТО, эти библиотеки не нужны на самом деле. ... функция jQuery .on ('load') предназначена для этих случаев и делает то же самое s то же самое ... Единственная разница в том, что он ждет, пока загрузятся все ресурсы со страницы, а не только изображение ...