이미지가있는 Jquery 벽돌 센터 레이아웃이로드에 적용되지 않습니다.

Jquery 벽돌을 사용하여 내 페이지의 항목을 배치하는 취미 프로젝트에서 작업 중입니다. 센터 레이아웃을 사용하여 아이템이 얼마나 많은데도 항상 내 페이지의 중앙에 위치하게됩니다. 실제로, 그것은 작동합니다. 문제는 페이지가 처음로드 될 때 레이아웃이 중앙에 있지 않고 페이지의 왼쪽에 있다는 것입니다. 그런 다음 원하는 레이아웃으로 '점프'합니다.이미지가있는 Jquery 벽돌 센터 레이아웃이로드에 적용되지 않습니다.

여기 내 말은 URL입니다. 갑작스러운 점프 후 레이아웃이 '정확하지 않음'을 확인하십시오. 내가 원하는 것은 점프를 제거하고 레이아웃이 사용자에게 제시 될 때 바로 레이아웃을 중심에 두는 것입니다.

masonry와 함께 ImageLoaded 플러그인을 사용했습니다.

$('#elements').imagesLoaded(function(){ 
      $('#elements').masonry({ 
       itemSelector: '.element', 
       columnWidth: 245, 
       gutterWidth: 6, 
       isFitWidth: true, 
       isAnimated: true 
      }); 
});

내가 #elements에 다음과 같은 규칙을 추가 배치를 중앙에 :

#elements{ 
margin: 0 auto; 
}

석공 술 문서 here에 의해 표시된 바와 같이 여기에 관련 코드입니다.

그럼 내 문제는 무엇입니까? 모든 입력에 감사드립니다.

편집 : @Bendim에

덕분에, 나는이 작업을 수행하는 방법을 생각. 나는 아래에 나의 대답을 썼다. 그러나 여전히 하나의 남은 문제가있다 : 전체 인터페이스가 그 자체로 나타나기까지는 다소 시간이 걸린다. 이상하지 않다. 어쨌든이 일을하겠습니다. 다시 한번 감사드립니다, @Bendim.

출처

2012-11-27 Gnijuohz

'mainContent' 컨테이너에 대해'너비 '지정을 시도 했습니까? – Cyclonecode

@KristerAndersson 가능한 한 유동적으로하기 전에 그렇게했습니다. 그래서 페이지 크기를 조정할 때 항목을 변경하여 애니메이션 효과를 적용하지만 여전히 페이지 중심에 머물러있게하고 싶습니다. 폭을 지정하면 그렇게 할 수 없습니다. – Gnijuohz

너비를 백분율로 설정할 수 있습니다. – Cyclonecode

@Bendim은 내가 잠시 생각하려고했던 아이디어를 나에게주었습니다. 하지만 #elements div를 숨기면 내 요소가 사라지게 된 후 겹쳐졌습니다. 그래서 대신 .element div를 숨긴 다음 사라집니다. 여기에 내가 무슨 짓을했는지 없습니다 : 다음

.element { 
    display: none; 
}

오른쪽 벽돌 코드 후 :

$('#elements).mansory(
    ... 
); 

$('.element').each(function(i){ 
    $(this).fadeIn('fast'); 
});

그것은 완벽하게 작동, 아니 모든 이동합니다.

출처

2012-12-03 03:10:55 Gnijuohz

나는 동일한 문제가있었습니다. 내 솔루션은 벽돌 요소로 div을 숨기고 모든 것이 납치 된 후에 사라지게하는 것입니다. javascript가없는 사용자의 대체 서비스가 중요했습니다.

<head> 
<title>Example</title> 
<style type="text/css"> 
#elements { 
    /* hide the elements to avoid jumping */ 
    display: none; 
} 
</style> 
<!-- fallback for people without javascript --> 
<noscript> 
<style type="text/css"> 
#elements { 
    /* overriding the css above */ 
    display: block !important; 
} 
</style> 
</noscript> 
</head> 
<body> 

Your page content… 

<!-- load all jquery from google, with fallback to local file --> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script>window.jQuery || document.write('<script src="/jquery-1.7.2.min.js"><\/script>')</script> 

<!-- load jQuery plugin that triggers a callback after all images have been loaded --> 
<script src="/jquery.imagesloaded.min.js"></script> 

<!-- load masonry script --> 
<script src="/jquery.masonry.min.js"></script> 


<script type="text/javascript"> 
    var options = { 
     itemSelector: '.element', 
     columnWidth: 245, 
     gutterWidth: 6, 
     isFitWidth: true, 
     isAnimated: true 
    }; 
    var $container = $('#elements'); 
    $container.imagesLoaded(function(){ 
     /* div with content fade in */ 
     $('#elements').fadeIn(1000); 
     /* if all images are loaded it runs the masonry script */ 
     $container.masonry(options); 
    }); 
</script> 

</body> 
</html>

출처

2012-12-02 23:50:16 Bendim

고마워! 하지만 # 요소를 숨기면 내 요소가 겹칩니다.대신 각 요소를 숨겨서 표시합니다. – Gnijuohz

높이와 너비가 고정 된 이미지를 렌더링하면 오버랩되지 않습니다. 내 솔루션 (예 : 260px에 대한) 폭을 수정 한 경우, 당신은 단지이 방법을 중복되지 않습니다이 방법으로 인쇄

<?php 
$imageInfo = getimagesize($pathToImage); 
$originalHeight = $imageInfo[1]; 
$originalWidth = $imageInfo[0]; 
$height = (260/$originalWidth) * $originalHeight; 
print "<img src='path/to/image.jpg' widht='260px' height='$height'>"; 
?>

이미지를 사용해야 PHP 함수 getimagesize($pathToImage)을 사용하는 것입니다. 나중에 js로로드 될 이미지는 높이를 전혀 설정할 필요가 없으므로 js가 아닌 php로 렌더링되는 이미지의 고정 높이 만 설정하면됩니다.

출처

2015-02-04 10:50:25

이미지가있는 Jquery 벽돌 센터 레이아웃이로드에 적용되지 않습니다.

답변

관련 문제