Safari의 간단한 동위 원소 예제와 관련된 문제

Question

다시 홈페이지를 다시 작성하고 Isotope를 사용하여 더 밝게 만들 생각입니다. 저는 과거 Isotope를 실험 해본 결과, 원하는대로 작동하지 못하게되어 실망했습니다. 이번엔 좀 더 단순하게하려고 노력 중입니다. 최신 호를 설명하기 위해 super simple example을 만들었습니다. 브라우저 창 크기를 조정하지 않으면 이미지가 Safari 및 일부 다른 브라우저에 표시되지 않습니다.

다음은 내 코드 샘플이며, div는 PHP로 화면에 표시됩니다. 나는 UL과 LI로 바뀔지도 모르지만 HTML은 브라우저 창 크기가 조정되기 전까지는 표시되지 않기 때문에 ... 내가해야만하는 JavaScript 강제 재 렌더링/재로드가 있습니까? MacBook Pro의 Safari에서 데모가 작동합니다.

다른 브라우저를 사용해 보았는데 Internet Explorer 8에서 작동하지만 Firefox는 내 작업 컴퓨터에서 Safari와 같은 반응을 보입니다.

<div id="contents"> 
<h1>Making the Internet better since 1995</h1> 
<!-- Masonry test code --> 
<div id="container"> 
    <div class="item"><a href="http://www.flickr.com/photos/mminghella71/944/in/pool-341554@N24" title="Bolt Action Heer Infantry Squad"><img src="http://farm6.staticflickr.com/5333/944_0e9f4db858_s.jpg" alt="Bolt Action Heer Infantry Squad" border="0" /></a></div> 
</div> 
<script> 
$(function(){ 

    var $container = $('#container'); 

    $container.isotope({ 
    itemSelector: '.item', 
    masonry: { 
     columnWidth: 75 
    } 
    }); 

}); 
</script> 

Answer 1

이동했습니다. 나는 지금처럼 www.muschamp.ca을 좋아한다. Isotope이나 JavaScript/CSS를 변경하지는 않았지만 많이 시도했습니다. 마침내이 문제를 해결 한 큰 변화는 PHP를 사용하여 이미지의 높이와 너비를 결정하는 것이 었습니다. Isotope 문서는 이것이 없으면 작동 할 것이라고 말하지만 제 경험에 의하면 자바 스크립트에 정확한 이미지 크기를 주면 훨씬 더 잘 작동합니다.

getimagesize() http://php.net/manual/en/function.getimagesize.php을 사용하면 성능이 얼마나 떨어지는 지 알 수 없지만 매번 이미지 태그를 작성하기 전에 호출을 추가하면 매번 완벽하게 렌더링됩니다. 약간의 이미지/RSS 피드를 절충안으로 가져옵니다.

내 시행 착오와 간단한 데모가 도움이되기를 바랍니다.

Answer 2

Windows.load에 함수를 넣으려고 했습니까?

$(window).on('load', function() { 
var $container = $('#container'); 

    $container.isotope({ 
    itemSelector: '.item', 
    masonry: { 
     columnWidth: 75 
    } 
    }); 
});