0

我想知道我的同位素元素容器是怎么回事。我尝试使用同位素优秀脚本（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 回答