반응 형 레이아웃. 동위 원소 컨테이너 높이 및 기타 필터링 불일치

Question

내 컨테이너의 동위 원소 요소와 어떤 관련이 있는지 궁금합니다. Isotope 우수 스크립트 (http://isotope.metafizzy.co/docs/filtering.html)를 사용하여 레이아웃을 구현하려고합니다.

가 여기 내 HTML의

<nav id="citta"> 
<ul> 
<li><a href="#" data-filters="*">All cities</a></li> 
        <li><a href="#" data-filters=".rm">Rome</a> </li> 
        <li><a href="#" data-filters=".to">Torino</a></li> 
        <li><a href="#" data-filters=".vr">Verona</a></li> 

    </ul> 
    </nav> 

<div id="elenco"> 

    <article class="rm"> 
     <span><a href="/content-Details" class="detail" data-fancybox-type="iframe"><img src="/images/image.jpg" alt="caption"/></a></span> 
     <h3>Content example <strong>****</strong></h3> 
     <span id="localita">Rome - rm</span> 
     <p>Cras sed ante. Phasellus in massa. Curabitur dolor eros, gravida et, hendrerit ac, cursus non, massa. Aliquam lorem. In hac habitasse platea dictumst. Cras eu mauris. Quisque lacus. Donec ipsum. Nullam vitae sem at nunc pharetra ultricies. Vivamus elit eros, ullamcorper a, adipiscing sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna.</p> 
    </article> 
    </div> 
</section> 

가 여기 내 JQuery와 페이지가로드 될 때마다

$(window).load(function(){ 
var $container = $('#elenco') 
// initialize Isotope 
    $container.isotope({ 
     // options... 
     itemSelector : 'article', 
     resizable: false, // disable normal resizing 
     layoutMode : 'fitRows', 
     animationEngine : 'best-available', 

     // set columnWidth to a percentage of container width 
     masonry: { columnWidth: $container.width()/5 } 
    }); 

    // update columnWidth on window resize 
    $(window).smartresize(function(){ 
     $container.isotope({ 
     // update columnWidth to a percentage of container width 
     masonry: { columnWidth: $container.width()/5 } 
     }); 
    }); 
    $('#citta a').click(function(){ 
     var selector = $(this).attr('data-filter'); 
     $container.isotope({ filter: selector }); 
     return false; 
    }); 
    }); 

의, 잠시 동안 모든 요소 플리커는 그들은 ... 때문에 컨테이너 높이 볼 수 없습니다 이 주소에있는 페이지는 ... http://bit.ly/122qSk5

Answer 1

$('window').resize(function() { 
    $container.isotope('reloadItems') 
}); 

또는

$('window').resize(function() { 
    $container.isotope('reLayout') 
}); 

?