Skip to content

瀑布流布局 #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
fengliu222 wants to merge 5 commits into
base: master
Choose a base branch
from
Open

瀑布流布局 #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4fa515d
1
fengliu222 May 14, 2013
34159dd
瀑布流
fengliu222 May 15, 2013
71933a0
Waterfalls Layout
fengliu222 May 18, 2013
6055466
Update _waterfall.less
fengliu222 May 18, 2013
cd5ad7d
整理文件结构
fengliu222 May 18, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion examples/layout/fluid/fluid.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<script type="text/javascript" src="../../less.js"></script>
</head>
<body>
<div class="fluid">
<div class="fall">
<div class="row-fluid">
<div class="span span1 first-child"></div>
<div class="span span1"></div>
Expand Down
40 changes: 40 additions & 0 deletions examples/layout/waterfalls/_waterfall.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}
18 changes: 18 additions & 0 deletions examples/layout/waterfalls/demo.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
53 changes: 53 additions & 0 deletions examples/layout/waterfalls/waterfall.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<!doctype html>
<html>
<head>
<title>Fluid Grid - VeryLess</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/less" href="./demo.less">
<script type="text/javascript" src="../../less.js"></script>
</head>
<body>
<div class="fall">
<div class="row-fall first-column">
<div class="span span1 "></div>
<div class="span span1"></div>
<div class="span span1"></div>
<div class="span span1"></div>
<div class="span span1"></div>
<div class="span span1"></div>
<div class="span span1"></div>
<div class="span span1"></div>
<div class="span span1"></div>
<div class="span span1"></div>

</div>

<div class="row-fall">
<div class="span span1"></div>
<div class="span span1"></div>
<div class="span span1"></div>
<div class="span span1"></div>
<div class="span span1"></div>
<div class="span span1"></div>
<div class="span span1"></div>
<div class="span span1"></div>
<div class="span span1"></div>
<div class="span span1"></div>
</div>

<div class="row-fall">
<div class="span span1"></div>
<div class="span span1"></div>
<div class="span span1"></div>
<div class="span span1"></div>
<div class="span span1"></div>
<div class="span span1"></div>
<div class="span span1"></div>
<div class="span span1"></div>
<div class="span span1"></div>
<div class="span span1"></div>
</div>

</div>
</body>
</html>
40 changes: 40 additions & 0 deletions src/layout/_waterfall.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}