Skip to content

Commit e62b833

Browse files
author
ShiHao
committed
流式布局插件masonry添加
1 parent 2be283a commit e62b833

10 files changed

+321
-6
lines changed

‎bootstrap.csproj

+16-1
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@
8484
<Content Include="css\bootstrap.sweetalert\sweet-alert.css" />
8585
<Content Include="favicon.ico" />
8686
<Content Include="image\forkme.png" />
87+
<Content Include="image\picture-loading.gif" />
8788
<Content Include="js\bootstrap.colorpicker\bootstrap-colorpicker.min.js" />
8889
<Content Include="js\bootstrap.datepicker\js\bootstrap-datepicker.min.js" />
8990
<Content Include="js\bootstrap.datepicker\locales\bootstrap-datepicker.ar.min.js" />
@@ -163,12 +164,18 @@
163164
<Content Include="js\jquery.animo\animo.min.js" />
164165
<Content Include="js\jquery.hammer\hammer.min.js" />
165166
<Content Include="js\jquery.hammer\jquery.hammer.js" />
167+
<Content Include="js\jquery.lazyload\jquery.lazyload.min.js" />
166168
<Content Include="js\jquery.toastr\toastr.min.js" />
167169
<Content Include="js\jquery.vide\jquery.vide.js" />
170+
<Content Include="js\masonry\imagesloaded.pkgd.min.js" />
171+
<Content Include="js\masonry\masonry.pkgd.min.js" />
168172
<Content Include="js\wow\wow.min.js" />
169173
<Content Include="plugs.html" />
170174
<Content Include="sample\carousel.html" />
171175
<Content Include="sample\scrolltop.html" />
176+
<Content Include="sample\ui\masonrylazyappend.html" />
177+
<Content Include="sample\ui\masonryimg.html" />
178+
<Content Include="sample\ui\masonry.html" />
172179
<Content Include="sample\ui\menu1.html" />
173180
<Content Include="sample\ui\videobg1.html" />
174181
<Content Include="sample\ui\videobg2.html" />
@@ -214,7 +221,15 @@
214221
<Content Include="video\ocean.ogv" />
215222
<Content Include="video\ocean.webm" />
216223
</ItemGroup>
217-
<ItemGroup />
224+
<ItemGroup>
225+
<Content Include="Web.config" />
226+
<None Include="Web.Debug.config">
227+
<DependentUpon>Web.config</DependentUpon>
228+
</None>
229+
<None Include="Web.Release.config">
230+
<DependentUpon>Web.config</DependentUpon>
231+
</None>
232+
</ItemGroup>
218233
<PropertyGroup>
219234
<VisualStudioVersion Condition="'$(VisualStudioVersion)' == ''">10.0</VisualStudioVersion>
220235
<VSToolsPath Condition="'$(VSToolsPath)' == ''">$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)</VSToolsPath>

‎image/picture-loading.gif

109 KB
Loading

‎index.html

+4-1
Original file line numberDiff line numberDiff line change
@@ -176,7 +176,10 @@ <h1>这是一套简单的基于bootstrap的简易框架</h1>
176176
<span class="badge">插件库&nbsp;2016.4.28</span>
177177
<a href="plugs.html?#plug-formhelper">加入bootstrap-formhelper插件集合库</a>
178178
</li>
179-
179+
<li class="list-group-item">
180+
<span class="badge">UI库&nbsp;2016.4.29</span>
181+
<a href="uis.html?#ui-masonry">加入masonry流式布局插件&nbsp;<label class="label label-danger">强烈推荐</label></a>
182+
</li>
180183
</ul>
181184
</div>
182185
<!--我是主要内容 end-->

‎js/jquery.lazyload/jquery.lazyload.min.js

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/masonry/imagesloaded.pkgd.min.js

+7
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/masonry/masonry.pkgd.min.js

+9
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎sample/ui/masonry.html

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<link rel="icon" href="../../favicon.ico" />
8+
<!--jquery库-->
9+
<script src="../../js/jquery-1.9.1.min.js"></script>
10+
<!--bootstrap库-->
11+
<link href="../../css/bootstrap.min.css" rel="stylesheet" />
12+
<script src="../../js/bootstrap.min.js"></script>
13+
<!--[if lt IE 9]>
14+
<script src="../../js/html5shiv.min.js"></script>
15+
<script src="../../js/respond.min.js"></script>
16+
<![endif]-->
17+
<!--font-awesome字体库-->
18+
<link href="../../css/font-awesome.min.css" rel="stylesheet" />
19+
<!--流式布局库-->
20+
<script src="../../js/masonry/masonry.pkgd.min.js"></script>
21+
<script src="../../js/masonry/imagesloaded.pkgd.min.js"></script>
22+
<style>
23+
.template { background-color: gray; border: 1px solid #b6ff00; }
24+
.div-200 { height: 200px; }
25+
.div-400 { height: 400px; }
26+
</style>
27+
<script>
28+
$(function () {
29+
// init Masonry
30+
var $grid = $('.content').masonry({
31+
columnWidth: '.template',
32+
itemSelector: '.template'
33+
});
34+
$grid.masonry();
35+
})
36+
</script>
37+
</head>
38+
<body>
39+
<div class="container">
40+
<div class="row content">
41+
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 template div-200">
42+
1
43+
</div>
44+
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 template div-400">
45+
2
46+
</div>
47+
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 template div-200">
48+
3
49+
</div>
50+
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 template div-400">
51+
4
52+
</div>
53+
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 template div-200">
54+
5
55+
</div>
56+
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 template div-400">
57+
6
58+
</div>
59+
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 template div-200">
60+
7
61+
</div>
62+
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 template div-400">
63+
8
64+
</div>
65+
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 template div-200">
66+
9
67+
</div>
68+
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 template div-400">
69+
10
70+
</div>
71+
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 template div-200">
72+
11
73+
</div>
74+
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 template div-400">
75+
12
76+
</div>
77+
</div>
78+
</div>
79+
</body>
80+
</html>

‎sample/ui/masonryimg.html

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<link rel="icon" href="../../favicon.ico" />
8+
<!--jquery库-->
9+
<script src="../../js/jquery-1.9.1.min.js"></script>
10+
<!--bootstrap库-->
11+
<link href="../../css/bootstrap.min.css" rel="stylesheet" />
12+
<script src="../../js/bootstrap.min.js"></script>
13+
<!--[if lt IE 9]>
14+
<script src="../../js/html5shiv.min.js"></script>
15+
<script src="../../js/respond.min.js"></script>
16+
<![endif]-->
17+
<!--font-awesome字体库-->
18+
<link href="../../css/font-awesome.min.css" rel="stylesheet" />
19+
<!--流式布局库-->
20+
<script src="../../js/masonry/masonry.pkgd.min.js"></script>
21+
<script src="../../js/masonry/imagesloaded.pkgd.min.js"></script>
22+
<style>
23+
.template { border: 1px solid #b6ff00; }
24+
</style>
25+
<script>
26+
$(function () {
27+
var base = $(".template");
28+
var base1 = base.clone();
29+
base1.html(base1.html().replace("300x150", "300x300"));
30+
for (var i = 0; i < 30; i++) {
31+
var temp;
32+
if (i % 2 == 0) {
33+
temp = base.clone();
34+
} else {
35+
temp = base1.clone();
36+
}
37+
temp.html(temp.html().replace("text=1", "text=" + (2 + i)));
38+
$(".content").append(temp);
39+
}
40+
// init Masonry
41+
var $grid = $('.content').masonry({
42+
columnWidth: '.template',
43+
itemSelector: '.template'
44+
});
45+
//图片加载完再执行布局计算
46+
$grid.imagesLoaded().progress(function () {
47+
$grid.masonry('layout');
48+
});
49+
})
50+
</script>
51+
</head>
52+
<body>
53+
<div class="container">
54+
<div class="row content">
55+
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 template">
56+
<div class="row">
57+
<img src="http://placehold.it/300x150?text=1" class="img-responsive" />
58+
</div>
59+
</div>
60+
</div>
61+
</div>
62+
</body>
63+
</html>

0 commit comments

Comments
 (0)