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' )
});

响应式布局。同位素容器高度和其他过滤不一致

1 个答案: