diff --git a/examples/layout/fluid/fluid.html b/examples/layout/fluid/fluid.html index bc1a118..f133e0e 100644 --- a/examples/layout/fluid/fluid.html +++ b/examples/layout/fluid/fluid.html @@ -7,7 +7,7 @@ -
+
diff --git a/examples/layout/waterfalls/_waterfall.less b/examples/layout/waterfalls/_waterfall.less new file mode 100644 index 0000000..f75536b --- /dev/null +++ b/examples/layout/waterfalls/_waterfall.less @@ -0,0 +1,40 @@ +//** +// * +// * Fluid Layout +// * +// * @author Moe <444984@qq.com> +// * +// */ + + +.makeWaterfall(@containerWidth: 960px, @column: 3,@columnMargin: 10px){ + + @fallContainerWidth: @containerWidth; + @fallColumn: @column; + @fallColumnMargin: @columnMargin; + @columnWidth: @fallContainerWidth/@fallColumn - (@column - 1) * @columnMargin; + + + .fall (@containerWidth,@column,@columnMargin) { + + .row-fall{ + .clearfix(); + width:@columnWidth; + margin-left:@columnMargin; + float:left; + } + .first-column{ + margin-left:0; + } + } + + .fall{ + .fall(@fallContainerWidth,@fallColumn,@fallColumnMargin); + width:@containerWidth; + } + .fall:after{ + content: " "; + clear:both; + display: block; + } +} \ No newline at end of file diff --git a/examples/layout/waterfalls/demo.less b/examples/layout/waterfalls/demo.less new file mode 100644 index 0000000..1f4d142 --- /dev/null +++ b/examples/layout/waterfalls/demo.less @@ -0,0 +1,18 @@ +@import '../../veryless-1.0.0.less'; +@import '_waterfall.less'; +.makeWaterfall(); + +*{margin:0;padding: 0;} +body{ + font-size: 100%; + background: #260810 url(http://img01.taobaocdn.com/tps/i1/T1I0MdXfFgXXcvIGcw-1680-1005.jpg) no-repeat 50% 0; +} +.row-fluid{ + margin-bottom: 1em; +} +.span{ + background: blue; + opacity: 0.6; + height: 3em; + margin:10px; +} \ No newline at end of file diff --git a/examples/layout/waterfalls/waterfall.html b/examples/layout/waterfalls/waterfall.html new file mode 100644 index 0000000..4b14d59 --- /dev/null +++ b/examples/layout/waterfalls/waterfall.html @@ -0,0 +1,53 @@ + + + + Fluid Grid - VeryLess + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+ +
+ +
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + \ No newline at end of file diff --git a/src/layout/_waterfall.less b/src/layout/_waterfall.less new file mode 100644 index 0000000..59e9ac0 --- /dev/null +++ b/src/layout/_waterfall.less @@ -0,0 +1,40 @@ +//** +// * +// * Waterfall Layout +// * +// * @author Moe <444984@qq.com> +// * +// */ + + +.makeWaterfall(@containerWidth: 960px, @column: 3,@columnMargin: 10px){ + + @fallContainerWidth: @containerWidth; + @fallColumn: @column; + @fallColumnMargin: @columnMargin; + @columnWidth: @fallContainerWidth/@fallColumn - (@column - 1) * @columnMargin; + + + .fall (@containerWidth,@column,@columnMargin) { + + .row-fall{ + .clearfix(); + width:@columnWidth; + margin-left:@columnMargin; + float:left; + } + .first-column{ + margin-left:0; + } + } + + .fall{ + .fall(@fallContainerWidth,@fallColumn,@fallColumnMargin); + width:@containerWidth; + } + .fall:after{ + content: " "; + clear:both; + display: block; + } +}