JS 무작위 기능 및 석공 술 문제가 발생했습니다.

Question

아래 코드를 사용하여 임의로 컨테이너 내에서 이미지를 배치합니다. 효과는 잘 작동하지만 대부분의 경우 함수가로드되지 않고 방문하는 데 실패하고 모든 이미지가 페이지에서 서로 어색하게 표시됩니다.

$(document).ready(function(){ 
    $('.each-image').each(function() { 
    $(this).css({ 
     'margin-top': Math.floor((Math.random() * 300) +1) + 'px', 
     'margin-left': Math.floor(Math.random() * 400 + 0) + 'px' }); 
    }); 
}); 

또한 겹치기를 방지하기 위해 석조 건축물을 사용하고 있습니다. 벽돌을 먼저 호출하고 이미지를 정리하면 무작위로 함수가 거리를 확장합니다.

벽돌 코드 :

$(document).ready(function(){ 
var $container = $('.content-side.individual-pages'); 

$container.imagesLoaded(function(){ 
    $container.masonry({ 
    itemSelector : '.each-image', 
    columnWidth: 30, 
    isAnimated: true 
    }); 
}); 
}); 

다음은 프로젝트에 대한 링크입니다 : http://www.sarahstaton.com/exhibitions-installations/하고 새로 고침, 당신은 작동 가끔 볼, 때로는 그렇지 않습니다.

내 질문에, 정말로, 다른 것을 사용해야한다면, 아니면 무작위 기능을 강화하기 위해 무엇을 할 수 있을까요?

감사합니다, R 이미지가 내가 볼 수있는 서로 오버랩하는하지 않는 것을 보장 코드에 아무것도 없다

Answer 1

.

벽돌 코드를 제거하고 "각 이미지"컬렉션을 통해 짜증나게하고 각 이미지에서 고유 한 여백 - 상단을 사용하는지/또는 어떻게 할 것인지를 보장하십시오.

$(document).ready(function(){ 
    var i = 0; 
    $('.each-image').each(function() { 
    i++; 
    $(this).css({ 
     'margin-top': (Math.floor((Math.random() * 300) +1) * (i*400)) + 'px', // Or change the facator to the images size 
     'margin-left': Math.floor(Math.random() * 400 + 0) + 'px' }); 
    }); 
});