---
layout: nil
title: Layout Modes
category: demos
---
<!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" / >
< title > {{ page.title }}< / title >
< link rel = "stylesheet" href = "../css/style.css" type = "text/css" media = "screen" / >
< / head >
< body >
< h1 > {{ page.title }}< / h1 >
< section id = "copy" >
< p > Isotope has a versatile layout engine that can accommodate multiple layout modes. See the docs on < a href = "../docs/layout-modes.html" > layout modes< / a > .< / p >
< / section >
< section id = "options" class = "clearfix" >
{% include layout-options.html %}
< / section > <!-- #options -->
< div id = "demo" class = "iso-container variable-sizes" >
{% for element in site.elements_ordered limit:20 %}
{% include element-partial.html %}
{% endfor %}
< / div > <!-- #demo -->
< script src = "../js/jquery-1.4.4.min.js" > < / script >
< script src = "../src/mini-modernizr.js" > < / script >
< script src = "../src/jquery.opto-transform.js" > < / script >
< script src = "../src/jquery.smartresize.js" > < / script >
< script src = "../src/jquery.isotope.js" > < / script >
< script src = "../src/jquery.ui.widget.js" > < / script >
< script src = "../js/fake-element.js" > < / script >
< script >
$(function(){
var $demo = $('#demo'),
masonryLayout = true;
// hacky way of adding random size classes
$demo.find('.element').each(function(){
if ( Math.random() > 0.6 ) {
$(this).addClass('width2');
}
if ( Math.random() > 0.6 ) {
$(this).addClass('height2');
}
});
$demo.isotope({
itemSelector : '.element',
masonry : {
columnWidth : 120
},
masonryHorizontal : {
rowHeight: 120
},
cellsByRow : {
columnWidth : 240,
rowHeight : 240
},
cellsByColumn : {
columnWidth : 240,
rowHeight : 240
},
animationEngine : $.browser.opera ? 'jquery' : 'best-available',
});
{% include layout-change.js %}
{% include option-buttons.js %}
});
< / script >
< / body >
< / html >
