You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

101 lines
2.3 KiB

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>CellsByRow</title>
  6. <link rel="stylesheet" href="examples.css" />
  7. <style>
  8. #horizontal {
  9. height: 300px;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14. <h1>CellsByRow</h1>
  15. <div id="basic" class="container">
  16. <div class="item"></div>
  17. <div class="item"></div>
  18. <div class="item"></div>
  19. <div class="item"></div>
  20. <div class="item"></div>
  21. <div class="item"></div>
  22. <div class="item"></div>
  23. <div class="item"></div>
  24. <div class="item"></div>
  25. <div class="item"></div>
  26. <div class="item"></div>
  27. <div class="item"></div>
  28. <div class="item"></div>
  29. </div>
  30. <div class="container" data-cells-by-row='{ "columnWidth": 120 }'>
  31. <div class="item"></div>
  32. <div class="item"></div>
  33. <div class="item"></div>
  34. <div class="item"></div>
  35. <div class="item"></div>
  36. <div class="item"></div>
  37. <div class="item"></div>
  38. <div class="item"></div>
  39. </div>
  40. <div id="bottom-right" class="container">
  41. <div class="item"></div>
  42. <div class="item"></div>
  43. <div class="item"></div>
  44. <div class="item"></div>
  45. <div class="item"></div>
  46. <div class="item"></div>
  47. <div class="item"></div>
  48. <div class="item"></div>
  49. <div class="item"></div>
  50. </div>
  51. <div id="horizontal" class="container">
  52. <div class="item"></div>
  53. <div class="item"></div>
  54. <div class="item"></div>
  55. <div class="item"></div>
  56. <div class="item"></div>
  57. <div class="item"></div>
  58. <div class="item"></div>
  59. <div class="item"></div>
  60. <div class="item"></div>
  61. </div>
  62. <script src="../bower_components/get-size/get-size.js"></script>
  63. <script src="../bower_components/matches-selector/matches-selector.js"></script>
  64. <script src="../bower_components/ev-emitter/ev-emitter.js"></script>
  65. <script src="../bower_components/fizzy-ui-utils/utils.js"></script>
  66. <script src="../item.js"></script>
  67. <script src="../outlayer.js"></script>
  68. <script src="cells-by-row.js"></script>
  69. <script>
  70. ( function() {
  71. var container = document.querySelector('#basic');
  72. var layout = new CellsByRow( container );
  73. })();
  74. ( function() {
  75. var container = document.querySelector('#bottom-right');
  76. var layout = new CellsByRow( container, {
  77. originLeft: false,
  78. originTop: false
  79. });
  80. })();
  81. ( function() {
  82. new CellsByRow( '#horizontal', {
  83. isHorizontal: true
  84. });
  85. })();
  86. </script>
  87. </body>
  88. </html>