|
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
-
- <title>CellsByRow</title>
-
- <link rel="stylesheet" href="examples.css" />
- <style>
- #horizontal {
- height: 300px;
- }
- </style>
-
- </head>
- <body>
-
- <h1>CellsByRow</h1>
-
- <div id="basic" class="container">
- <div class="item"></div>
- <div class="item"></div>
- <div class="item"></div>
- <div class="item"></div>
- <div class="item"></div>
- <div class="item"></div>
- <div class="item"></div>
- <div class="item"></div>
- <div class="item"></div>
- <div class="item"></div>
- <div class="item"></div>
- <div class="item"></div>
- <div class="item"></div>
- </div>
-
- <div class="container" data-cells-by-row='{ "columnWidth": 120 }'>
- <div class="item"></div>
- <div class="item"></div>
- <div class="item"></div>
- <div class="item"></div>
- <div class="item"></div>
- <div class="item"></div>
- <div class="item"></div>
- <div class="item"></div>
- </div>
-
- <div id="bottom-right" class="container">
- <div class="item"></div>
- <div class="item"></div>
- <div class="item"></div>
- <div class="item"></div>
- <div class="item"></div>
- <div class="item"></div>
- <div class="item"></div>
- <div class="item"></div>
- <div class="item"></div>
- </div>
-
- <div id="horizontal" class="container">
- <div class="item"></div>
- <div class="item"></div>
- <div class="item"></div>
- <div class="item"></div>
- <div class="item"></div>
- <div class="item"></div>
- <div class="item"></div>
- <div class="item"></div>
- <div class="item"></div>
- </div>
-
- <script src="../bower_components/get-size/get-size.js"></script>
- <script src="../bower_components/matches-selector/matches-selector.js"></script>
- <script src="../bower_components/ev-emitter/ev-emitter.js"></script>
- <script src="../bower_components/fizzy-ui-utils/utils.js"></script>
- <script src="../item.js"></script>
- <script src="../outlayer.js"></script>
-
- <script src="cells-by-row.js"></script>
-
- <script>
- ( function() {
- var container = document.querySelector('#basic');
- var layout = new CellsByRow( container );
- })();
- ( function() {
- var container = document.querySelector('#bottom-right');
- var layout = new CellsByRow( container, {
- originLeft: false,
- originTop: false
- });
- })();
- ( function() {
- new CellsByRow( '#horizontal', {
- isHorizontal: true
- });
- })();
- </script>
-
- </body>
- </html>
|