META-INF.resources.bower_components.isotope._posts.demos.2011-09-30-fluid-responsive.html Maven / Gradle / Ivy

Go to download

---
title: Fluid / responsive
layout: default
category: demos
---




    This hack allows you to use percentage-based widths for item elements for fluid / responsive layouts.

    {% highlight javascript %}

    var $container = $('#container')
    // initialize Isotope
    $container.isotope({
    // options...
    resizable: false, // disable normal resizing
    // 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 }
    });
    });

    {% endhighlight %}





    {% include filter-buttons.html %}

    {% include sort-buttons.html %}

    Etc

    
        Toggle variable sizes
        Insert new elements
        Append new elements
        Shuffle
    

 


    {% for elem_number in site.best_of_order %}
    {% assign element = site.elements[elem_number] %}
    {% include element-partial.html %}
    {% endfor %}