0

私のアイソトープ元素の容器はどうなっているのかしら。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

4

1 に答える 1

0

試してみましたか

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

また

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

?

于 2013-04-12T10:43:24.087 に答える