mirror of https://github.com/metafizzy/isotope
David DeSandro
14 years ago
9 changed files with 377 additions and 57 deletions
@ -0,0 +1,24 @@ |
|||||||
|
// change layout
|
||||||
|
var isHorizontal = false; |
||||||
|
$('#layouts a').click(function(){ |
||||||
|
var mode = $(this).attr('href').slice(1); |
||||||
|
wasHorizontal = isHorizontal; |
||||||
|
isHorizontal = $(this).hasClass('horizontal'); |
||||||
|
|
||||||
|
if ( wasHorizontal !== isHorizontal ) { |
||||||
|
// need to do some clean up for transitions and sizes
|
||||||
|
var style = isHorizontal ?
|
||||||
|
{ height: '80%', width: $demo.width() } :
|
||||||
|
{ width: 'auto' }; |
||||||
|
$demo.addClass('no-transition').css( style ); |
||||||
|
setTimeout(function(){ |
||||||
|
$demo.removeClass('no-transition').isotope({ layoutMode : mode }); |
||||||
|
}, 100 ) |
||||||
|
} else { |
||||||
|
// go ahead and apply new layout
|
||||||
|
$demo.isotope({ layoutMode : mode }); |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
return false; |
||||||
|
}); |
||||||
@ -0,0 +1,10 @@ |
|||||||
|
<h3>Layouts</h3> |
||||||
|
|
||||||
|
<ul id="layouts" class="option-set floated clearfix"> |
||||||
|
<li><a href="#masonry" class="selected">masonry</a></li> |
||||||
|
<li><a href="#fitRows">fitRows</a></li> |
||||||
|
<li><a href="#cellsByRow">cellsByRow</a></li> |
||||||
|
<li><a href="#masonryHorizontal" class="horizontal">masonryHorizontal</a></li> |
||||||
|
<li><a href="#fitColumns" class="horizontal">fitColumns</a></li> |
||||||
|
<li><a href="#cellsByColumn" class="horizontal">cellsByColumn</a></li> |
||||||
|
</ul> |
||||||
@ -0,0 +1,12 @@ |
|||||||
|
$('#options').find('.option-set a').click(function(){ |
||||||
|
var $this = $(this); |
||||||
|
|
||||||
|
// don't proceed if already selected
|
||||||
|
if ( $this.hasClass('selected') ) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
$this.parents('.option-set').find('.selected').removeClass('selected'); |
||||||
|
$this.addClass('selected'); |
||||||
|
|
||||||
|
}); |
||||||
@ -0,0 +1,136 @@ |
|||||||
|
--- |
||||||
|
|
||||||
|
title: Layouts |
||||||
|
category: docs |
||||||
|
layout: doc |
||||||
|
body_class: option-def |
||||||
|
|
||||||
|
--- |
||||||
|
|
||||||
|
Isotope is versatile in that it can accommodate multiple layout modes. You can set and change the layout mode via the `layoutMode` option. |
||||||
|
|
||||||
|
### Example |
||||||
|
|
||||||
|
{% highlight javascript %} |
||||||
|
|
||||||
|
$('#container').isotope({ layoutMode: 'fitRows' }); |
||||||
|
|
||||||
|
{% endhighlight %} |
||||||
|
|
||||||
|
Six layout modes are built into Isotope. |
||||||
|
|
||||||
|
<h2 id="masonry">masonry</h2> |
||||||
|
|
||||||
|
masonry is the default layout mode for Isotope. Item elements are arranged intelligently within a grid. For each item element, the script calculates the next best fit for the item within the grid. |
||||||
|
|
||||||
|
**Options** |
||||||
|
|
||||||
|
<dl class="clearfix"> |
||||||
|
<dt><code>columnWidth</code></dt> |
||||||
|
<dd class="option-type">Integer</dd> |
||||||
|
</dl> |
||||||
|
|
||||||
|
The width of one column in the grid. If no value is set for `columnWidth`, default is the width of the first item element. |
||||||
|
|
||||||
|
**Example** |
||||||
|
|
||||||
|
{% highlight javascript %} |
||||||
|
|
||||||
|
$('#container').isotope({ |
||||||
|
masonry: { |
||||||
|
columnWidth: 240 |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
{% endhighlight %} |
||||||
|
|
||||||
|
<h2 id="fitRows">fitRows</h2> |
||||||
|
|
||||||
|
Item elements are arranged into rows. Similar to what you would expect from a layout that uses `float: left` |
||||||
|
|
||||||
|
<h2 id="cellsByRow">cellsByRow</h2> |
||||||
|
|
||||||
|
A grid layout. The grid is defined by two options, `columnWidth` and `rowHeight`. |
||||||
|
|
||||||
|
**Options** |
||||||
|
|
||||||
|
<dl class="clearfix"> |
||||||
|
<dt><code>columnWidth</code></dt> |
||||||
|
<dd class="option-type">Integer</dd> |
||||||
|
</dl> |
||||||
|
<dl class="clearfix"> |
||||||
|
<dt><code>rowHeight</code></dt> |
||||||
|
<dd class="option-type">Integer</dd> |
||||||
|
</dl> |
||||||
|
|
||||||
|
**Example** |
||||||
|
|
||||||
|
{% highlight javascript %} |
||||||
|
|
||||||
|
$('#container').isotope({ |
||||||
|
layoutMode: 'cellsByRow', |
||||||
|
cellsByRow: { |
||||||
|
columnWidth: 240, |
||||||
|
rowHeight: 360 |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
{% endhighlight %} |
||||||
|
|
||||||
|
<h2 id="masonryHorizontal">masonryHorizontal</h2> |
||||||
|
|
||||||
|
The horizontal equivalent of masonry layout. Instead of progressing top-to-bottom, masonryHorizontal layout will progress left-to-right. Item elements are arranged intelligently within a grid. For each item element, the script calculates the next best fit for the item within the grid. |
||||||
|
|
||||||
|
**Options** |
||||||
|
|
||||||
|
<dl class="clearfix"> |
||||||
|
<dt><code>rowHeight</code></dt> |
||||||
|
<dd class="option-type">Integer</dd> |
||||||
|
</dl> |
||||||
|
|
||||||
|
The width of one column in the grid. If no value is set for `rowHeight`, default is the height of the first item element. |
||||||
|
|
||||||
|
**Example** |
||||||
|
|
||||||
|
{% highlight javascript %} |
||||||
|
|
||||||
|
$('#container').isotope({ |
||||||
|
masonryHorizontal: { |
||||||
|
rowHeight: 360 |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
{% endhighlight %} |
||||||
|
|
||||||
|
<h2 id="fitRows">fitColumns</h2> |
||||||
|
|
||||||
|
Item elements are arranged into columns. The horizontal equivalent of fitRows. Columns progress from left to right. Items within those columns are arranged top-to-bottom. |
||||||
|
|
||||||
|
<h2 id="cellsByRow">cellsByColumn</h2> |
||||||
|
|
||||||
|
A grid layout. The grid is defined by two options, `columnWidth` and `rowHeight`. The horizontal equivalent of cellsByRow. |
||||||
|
|
||||||
|
**Options** |
||||||
|
|
||||||
|
<dl class="clearfix"> |
||||||
|
<dt><code>columnWidth</code></dt> |
||||||
|
<dd class="option-type">Integer</dd> |
||||||
|
</dl> |
||||||
|
<dl class="clearfix"> |
||||||
|
<dt><code>rowHeight</code></dt> |
||||||
|
<dd class="option-type">Integer</dd> |
||||||
|
</dl> |
||||||
|
|
||||||
|
**Example** |
||||||
|
|
||||||
|
{% highlight javascript %} |
||||||
|
|
||||||
|
$('#container').isotope({ |
||||||
|
layoutMode: 'cellsByRow', |
||||||
|
cellsByRow: { |
||||||
|
columnWidth: 240, |
||||||
|
rowHeight: 360 |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
{% endhighlight %} |
||||||
@ -0,0 +1,81 @@ |
|||||||
|
--- |
||||||
|
layout: nil |
||||||
|
title: Layouts |
||||||
|
category: examples |
||||||
|
--- |
||||||
|
<!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="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> |
||||||
Loading…
Reference in new issue