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 @@ } }); + + +