docs : add docs on straightDown. Alphabetically sort layout modes docs

_includes/layout-options.html

@@ -4,6 +4,7 @@
   <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="#straightDown">straightDown</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>

_posts/docs/2010-12-05-layout-modes.mdown

@@ -6,12 +6,12 @@ layout: doc
 body_class: option-def
 related: layout
 toc:
-  - { title: masonry, anchor: masonry }
-  - { title: fitRows, anchor: fitrows }
+  - { title: cellsByColumn, anchor: cellsbycolumn }
   - { title: cellsByRow, anchor: cellsbyrow }
-  - { title: masonryHorizontal, anchor: masonryhorizontal }
   - { title: fitColumns, anchor: fitcolumns }
-  - { title: cellsByColumn, anchor: cellsbycolumn }
+  - { title: fitRows, anchor: fitrows }
+  - { title: masonry, anchor: masonry }
+  - { title: masonryHorizontal, anchor: masonryhorizontal }
   - { title: Horizontal layouts, anchor: horizontal_layouts }
 
 ---
@@ -28,36 +28,37 @@ $('#container').isotope({ layoutMode : 'fitRows' });
 
 {% endhighlight %}
 
-Six layout modes are built into Isotope.
+Several layout modes are built into Isotope.
 
-## masonry
+## cellsByColumn
 
-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.
+A grid layout where items are centered inside each cell. The grid is defined by two options, `columnWidth` and `rowHeight`. The horizontal equivalent of cellsByRow.
 
-### Options {#masonry-options}
+### Options {#cellsByColumn-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>
 
-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 {#masonry-example}
+### Example {#cellsByColumn-example}
 
 {% highlight javascript %}
 
 $('#container').isotope({
-  masonry : {
-    columnWidth : 240
+  layoutMode : 'cellsByRow',
+  cellsByRow : {
+    columnWidth : 240,
+    rowHeight : 360
   }
 });
 
 {% endhighlight %}
 
-## fitRows
-
-Item elements are arranged into rows. Similar to what you would expect from a layout that uses `float: left`
 
 ## cellsByRow
 
@@ -88,64 +89,70 @@ $('#container').isotope({
 
 {% endhighlight %}
 
-## masonryHorizontal
+## fitColumns
 
-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.
+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.
 
-### Options {#masonryHorizontal-options}
+## fitRows
+
+Item elements are arranged into rows, left to right. Rows progress top to bottom. Similar to what you would expect from a layout that uses `float: left`.
+
+## masonry
+
+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 {#masonry-options}
 
 <dl class="clearfix">
-  <dt><code>rowHeight</code></dt>
+  <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 `rowHeight`, default is the height of the first item element.
+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 {#masonryHorizontal-example}
+### Example {#masonry-example}
 
 {% highlight javascript %}
 
 $('#container').isotope({
-  masonryHorizontal : {
-    rowHeight : 360
+  masonry : {
+    columnWidth : 240
   }
 });
 
 {% endhighlight %}
 
-## fitColumns
 
-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.
 
-## cellsByColumn
 
-A grid layout where items are centered inside each cell. The grid is defined by two options, `columnWidth` and `rowHeight`. The horizontal equivalent of cellsByRow.
 
-### Options {#cellsByColumn-options}
 
-<dl class="clearfix">
-  <dt><code>columnWidth</code></dt>
-  <dd class="option-type">Integer</dd>
-</dl>
+## masonryHorizontal
+
+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 {#masonryHorizontal-options}
+
 <dl class="clearfix">
   <dt><code>rowHeight</code></dt>
   <dd class="option-type">Integer</dd>
 </dl>
 
-### Example {#cellsByColumn-example}
+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 {#masonryHorizontal-example}
 
 {% highlight javascript %}
 
 $('#container').isotope({
-  layoutMode : 'cellsByRow',
-  cellsByRow : {
-    columnWidth : 240,
+  masonryHorizontal : {
     rowHeight : 360
   }
 });
 
 {% endhighlight %}
 
+
 ## Horizontal layouts
 
 Horizontal layout modes (masonryHorizontal, fitColumns, and cellsByColumn) need a container that has a height value. Be sure that your CSS has height set.

index.html

@@ -62,7 +62,7 @@ layout: nil
       <h2>Layout: </h2>
       <ul id="layouts" class="option-set floated clearfix">
         <li><a href="#fitRows" class="selected">fitRows</a></li>
-        <li><a href="#verticalList">verticalList</a></li>
+        <li><a href="#straightDown">straightDown</a></li>
         <li><a href="#masonry">masonry</a></li>
       </ul>
     </div>