Wookmark-jQuery/example-endless-scroll/index.html at 2.1 · rebootcode/Wookmark-jQuery · GitHub

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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>Wookmark Endless Scroll Example</title>
  <meta name="description" content="An example how to achieve a endless scroll effect with Wookmark">
  <meta name="author" content="Christoph Ono, Sebastian Helzle">

  <meta name="viewport" content="width=device-width,initial-scale=1">

  <!-- CSS Reset -->
  <link rel="stylesheet" href="../bower_components/normalize.css/normalize.css">

  <!-- Global CSS for the page and tiles -->
  <link rel="stylesheet" href="css/main.css">

</head>

<body>

  <div>
    <header>
      <h1>Wookmark Endless<br/>Scroll Example</h1>
      <p>Scroll down to see the infinite scroll effect.</p>
      <p><a href="../index.html">Back to overview</a></p>
    </header>

    <div role="main">
      <ul id="container" class="tiles-wrap animated">
        <!-- These are our grid blocks -->
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
        <li>18</li>
        <li>19</li>
        <li>20</li>
        <li>21</li>
        <li>22</li>
        <li>23</li>
        <li>24</li>
        <li>25</li>
        <li>26</li>
        <li>27</li>
        <li>28</li>
        <li>29</li>
        <li>30</li>
        <!-- End of grid blocks -->
      </ul>

    </div>
  </div>

  <!-- include jQuery -->
  <script src="../bower_components/jquery/dist/jquery.min.js"></script>

  <!-- Include the imagesLoaded plug-in -->
  <script src="../bower_components/imagesloaded/imagesloaded.pkgd.min.js"></script>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>

  <!-- Include the plug-in -->
  <script src="../wookmark.js"></script>

  <!-- Once the page is loaded, initalize the plug-in. -->
  <script type="text/javascript">
    (function ($) {
      // Instantiate wookmark after all images have been loaded
      var wookmark,
          container = '#container',
          $container = $(container),
          $window = $(window),
          $document = $(document);

      wookmark = new Wookmark(container, {
        offset: 24, // Optional, the distance between grid items
        itemWidth: 300 // Optional, the width of a grid item
      });

      /**
       * When scrolled all the way to the bottom, add more tiles
       */
      function onScroll() {
        // Check if we're within 100 pixels of the bottom edge of the broser window.
        var winHeight = window.innerHeight ? window.innerHeight : $window.height(), // iphone fix
            closeToBottom = ($window.scrollTop() + winHeight > $document.height() - 100);

        if (closeToBottom) {
          var $items = $('li', $container);
          var html = "";

          for(var i=0; i<10; i++) {
            html += '<li>'+($items.length+i)+'</li>';
          }
          $container.append(html);

          // Get the first then items from the grid, clone them, and add them to the bottom of the grid
          // var $items = $('li', $container),
          //     $firstTen = $items.slice(0, 10).clone().css('opacity', 0);
          // $container.append($firstTen);

          wookmark.initItems();
          wookmark.layout(true, function () {
            // Fade in items after layout
            setTimeout(function() {
              $firstTen.css('opacity', 1);
            }, 300);
          });
        }
      };

      // Capture scroll event.
      $window.bind('scroll.wookmark', onScroll);
    })(jQuery);
  </script>

</body>
</html>