diff --git a/_layouts/elements.html b/_layouts/elements.html
index 222d094..2eaf9bc 100644
--- a/_layouts/elements.html
+++ b/_layouts/elements.html
@@ -117,7 +117,7 @@
console.time('initializeMe');
$demo.molequul({
itemSelector : '.element',
- layoutMode : '{{ page.layout_options limit:1 }}',
+ layoutMode : '{% for layout in page.layout_options limit:1 %}{{ layout }}{% endfor %}',
masonry : {
columnWidth : 120
},
diff --git a/_posts/examples/2010-12-19-elements-partial-horizontal.html b/_posts/examples/2010-12-19-elements-partial-horizontal.html
index 20844cc..c2f43f0 100644
--- a/_posts/examples/2010-12-19-elements-partial-horizontal.html
+++ b/_posts/examples/2010-12-19-elements-partial-horizontal.html
@@ -3,7 +3,7 @@ title: Elements Partial Horizontal
layout: elements
category: examples
body_class: horizontal
-layout_options: cellsByColumn
+layout_options: [ fitColumns, cellsByColumn ]
---
diff --git a/src/jquery.molequul.js b/src/jquery.molequul.js
index dba4319..6c9336d 100755
--- a/src/jquery.molequul.js
+++ b/src/jquery.molequul.js
@@ -669,6 +669,60 @@
}
});
+ // ====================== fitColumns ======================
+
+ $.extend( $.Molequul.prototype, {
+
+ _fitColumnsReset : function() {
+ this.fitColumns = {
+ x : 0,
+ y : 0,
+ width : 0
+ };
+ return this;
+ },
+
+ _fitColumnsLayout : function( $elems ) {
+ var instance = this;
+ this.height = this.element.height();
+ return $elems.each( function() {
+ var $this = $(this),
+ atomW = $this.outerWidth(true),
+ atomH = $this.outerHeight(true),
+ x, y;
+
+ if ( instance.fitColumns.y !== 0 && atomH + instance.fitColumns.y > instance.height ) {
+ // if this element cannot fit in the current column
+ instance.fitColumns.x = instance.fitColumns.width;
+ instance.fitColumns.y = 0;
+ }
+
+ // position the atom
+ x = instance.fitColumns.x + instance.posLeft;
+ y = instance.fitColumns.y + instance.posTop;
+ instance._pushPosition( $this, x, y );
+
+ instance.fitColumns.width = Math.max( instance.fitColumns.x + atomW, instance.fitColumns.width );
+ instance.fitColumns.y += atomH;
+
+ });
+ },
+
+ _fitColumnsGetContainerSize : function () {
+ return { width : this.fitColumns.width };
+ },
+
+ _fitColumnsResize : function() {
+ return this.reLayout();
+ }
+
+
+ });
+
+
+
+ // ====================== cellsByColumn ======================
+
$.extend( $.Molequul.prototype, {
_cellsByColumnReset : function() {
@@ -709,6 +763,9 @@
}
});
+
+
+