Masonry.js 워드 프레스 라이브 사이트의 문제가 아니라 지역 dev에 사이트

Question

이 사이트 작업입니다 : 그것은 Masonry.js와 워드 프레스 테마를 사용하고 http://lisarevson.com/

.

사이트를 다운로드하고 DB를 복제했으며 사이트는 MAMP Pro에서 로컬로 잘 보입니다.

그러나 라이브 사이트에서 볼 수 있듯이 벽돌 타일은 바닥에서 위로 미끄러 져 서로 겹칩니다. 나는 왜 그런 일이 생기지 만, 지역적으로 일어나지 않으므로 문제를 해결하는 방법을 조금 잃어 버렸습니다.

생각하십니까?

Answer 1

난 당신이 헤더에 JS 기능을 넣어 참조 :

<script type="text/javascript"> 
jQuery(document).ready(function($){ 
$("#wrapper").vids(); 
}); 
jQuery(document).ready(function($){ 
$('#content-blog').masonry({columnWidth:323}); 
}); 
</script> 

난 당신이 호출 된 mansory.js 후 바닥 글로 이동한다고 생각합니다.

Answer 2

스티브도

var $container = $('#content-blog'); 
// initialize 
$container.masonry({ 
columnWidth: 323, 
itemSelector: '.post' 
}); 

을 시도 르가 위에서 아래로 스크립트를 이동하고이 전화

Answer 3

시도를하는 데 도움이 masonry.min.js 후

희망을 배치 말한대로 벽돌 위에 window.load

<script type="text/javascript"> 
jQuery(document).ready(function($){ 
$("#wrapper").vids(); 
}); 
jQuery(window).load(function($){ 
$('#content-blog').masonry({columnWidth:323}); 
}); 
</script> 

실제로 무슨 일이 일어 납니까? 처음에는 로컬 서버에서 동시로드로 인해 라이브 서버에 이미지가로드됩니다.

Answer 4

감사합니다. 모두가 올바른 길을 걷고있었습니다. 나는 대답을 찾았습니다 : imagesLoaded.

jQuery(document).ready(function($){ 
    // initialize Masonry 
    var $container = $('#content-blog').masonry(); 
    // layout Masonry again after all images have loaded 
    $container.imagesLoaded(function() { 
     $container.masonry(); 
    }); 

});