-
Notifications
You must be signed in to change notification settings - Fork 7
/
index.html
62 lines (48 loc) · 2.73 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html ng-app="masonryApp">
<head>
<title>Image Gallery</title>
<script src="angular.js"></script>
<script src="imagesLoaded.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="LoadImages" style="margin: 0 25px 0; padding: 0 15px 0;">
<!-- <div infinite-scroll="fetchNext()" infinite-scroll-distance="1" style="display:inline-block; width:100%; height:100%">
<div data-images-loaded data-masonry data-x-margin="20" data-y-margin="30" data-img-width="250" style="margin:3% 2% 0 2%; padding: 20px 1% 0; border:1px solid black;">
<div data-ng-repeat="image in images" style="border:1px solid black; border-radius:5px; padding:1px;">
<img ng-src="http://lorempixel.com/{{image.src}}">
<div>Foo Bar</div>
</div>
</div>
</div> -->
<div data-images-loaded data-use-progress-events="yes" style="display:inline-block; width:100%; height:100%">
<div style="background:none repeat scroll 0 0 hsla(0, 0%, 0%, 0.9); border-radius:20px; padding:40px; position:fixed; left:40%; top:50px; z-index:2;" ng-show="progress>0">
<progress value="{{progress}}" max="30"></progress>
</div>
<div ng-controller="Ctrl1">
<div style="background:none repeat scroll 0 0 hsla(0, 0%, 0%, 0.9); border-radius:20px; padding:40px; position:fixed; left:20%; top:50px; z-index:2;" ng-show="progress>0">
<progress value="{{progress}}" max="30"></progress>
</div>
<div data-images-loaded data-use-progress-events="yes" style="margin:3% 0 0 4%; padding: 20px 1% 0; border:1px solid black; width:43%; float:left;">
<div data-ng-repeat="image in images" style="border:1px solid black; border-radius:5px; padding:1px; display:inline-block; min-width:150px;">
<img ng-src="http://lorempixel.com/{{image.src}}">
<div>Foo Bar</div>
</div>
</div>
<button style="position:fixed; left:5px; bottom:10px; z-index:2; height:100px;" ng-click="addMore()">Load more</button>
</div>
<div ng-controller="Ctrl2">
<div style="background:none repeat scroll 0 0 hsla(0, 0%, 0%, 0.9); border-radius:20px; padding:40px; position:fixed; right:20%; top:50px; z-index:2;" ng-show="progress>0">
<progress value="{{progress}}" max="30"></progress>
</div>
<div data-images-loaded data-use-progress-events="yes" style="margin:3% 4% 0 0; padding: 0 1% 0; border:1px solid black; width:43%; float:right;">
<div data-ng-repeat="image in images2" style="border:1px solid black; border-radius:5px; padding:1px; display:inline-block; min-width:150px;">
<img ng-src="http://lorempixel.com/{{image.src}}">
<div>Shoe Bar</div>
</div>
</div>
<button style="position:fixed; right:5px; bottom:10px; z-index:2; height:100px;" ng-click="addMore()">Load more</button>
</div>
</div>
</body>
</html>