Wookmark-jQuery/example-endless-scroll/index.html at develop · lirco/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
135
136
137
138
139
<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>jQuery Wookmark Plug-in Example</title>
  <meta name="description" content="An very basic example of how to use the Wookmark jQuery plug-in.">
  <meta name="author" content="Christoph Ono, Sebastian Helzle">

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

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

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

</head>

<body>

  <div id="container">
    <header>
      <h1>jQuery Wookmark Plug-in Example</h1>
      <p>Scroll down to see the infinite scroll effect.</p>
    </header>
    <div id="main" role="main">

      <ul id="tiles">
        <!-- These are our grid blocks -->
        <li><img src="../sample-images/image_1.jpg" width="200" height="283"><p>1</p></li>
        <li><img src="../sample-images/image_2.jpg" width="200" height="300"><p>2</p></li>
        <li><img src="../sample-images/image_3.jpg" width="200" height="252"><p>3</p></li>
        <li><img src="../sample-images/image_4.jpg" width="200" height="158"><p>4</p></li>
        <li><img src="../sample-images/image_5.jpg" width="200" height="300"><p>5</p></li>
        <li><img src="../sample-images/image_6.jpg" width="200" height="297"><p>6</p></li>
        <li><img src="../sample-images/image_7.jpg" width="200" height="200"><p>7</p></li>
        <li><img src="../sample-images/image_8.jpg" width="200" height="200"><p>8</p></li>
        <li><img src="../sample-images/image_9.jpg" width="200" height="398"><p>9</p></li>
        <li><img src="../sample-images/image_10.jpg" width="200" height="267"><p>10</p></li>
        <li><img src="../sample-images/image_1.jpg" width="200" height="283"><p>11</p></li>
        <li><img src="../sample-images/image_2.jpg" width="200" height="300"><p>12</p></li>
        <li><img src="../sample-images/image_3.jpg" width="200" height="252"><p>13</p></li>
        <li><img src="../sample-images/image_4.jpg" width="200" height="158"><p>14</p></li>
        <li><img src="../sample-images/image_5.jpg" width="200" height="300"><p>15</p></li>
        <li><img src="../sample-images/image_6.jpg" width="200" height="297"><p>16</p></li>
        <li><img src="../sample-images/image_7.jpg" width="200" height="200"><p>17</p></li>
        <li><img src="../sample-images/image_8.jpg" width="200" height="200"><p>18</p></li>
        <li><img src="../sample-images/image_9.jpg" width="200" height="398"><p>19</p></li>
        <li><img src="../sample-images/image_10.jpg" width="200" height="267"><p>20</p></li>
        <li><img src="../sample-images/image_1.jpg" width="200" height="283"><p>21</p></li>
        <li><img src="../sample-images/image_2.jpg" width="200" height="300"><p>22</p></li>
        <li><img src="../sample-images/image_3.jpg" width="200" height="252"><p>23</p></li>
        <li><img src="../sample-images/image_4.jpg" width="200" height="158"><p>24</p></li>
        <li><img src="../sample-images/image_5.jpg" width="200" height="300"><p>25</p></li>
        <li><img src="../sample-images/image_6.jpg" width="200" height="297"><p>26</p></li>
        <li><img src="../sample-images/image_7.jpg" width="200" height="200"><p>27</p></li>
        <li><img src="../sample-images/image_8.jpg" width="200" height="200"><p>28</p></li>
        <li><img src="../sample-images/image_9.jpg" width="200" height="398"><p>29</p></li>
        <li><img src="../sample-images/image_10.jpg" width="200" height="267"><p>30</p></li>
        <!-- End of grid blocks -->
      </ul>

    </div>
    <footer>

    </footer>
  </div>

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

  <!-- Include the imagesLoaded plug-in -->
  <script src="../libs/jquery.imagesloaded.js"></script>

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

  <!-- Once the page is loaded, initalize the plug-in. -->
  <script type="text/javascript">
    (function ($){
      $('#tiles').imagesLoaded(function() {
        var handler = null;

        // Prepare layout options.
        var options = {
          autoResize: true, // This will auto-update the layout when the browser window is resized.
          container: $('#main'), // Optional, used for some extra CSS styling
          offset: 20, // Optional, the distance between grid items
          itemWidth: 210 // Optional, the width of a grid item
        };

        function applyLayout() {
          $('#tiles').imagesLoaded(function() {
            // Destroy the old handler
            if (handler.wookmarkInstance) {
              handler.wookmarkInstance.clear();
            }

            // Create a new layout handler.
            handler = $('#tiles li');
            handler.wookmark(options);
          });
        }

        /**
         * When scrolled all the way to the bottom, add more tiles.
         */
        function onScroll(event) {
          // 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
          var closeToBottom = ($(window).scrollTop() + winHeight > $(document).height() - 100);

          if (closeToBottom) {
            // Get the first then items from the grid, clone them, and add them to the bottom of the grid.
            var items = $('#tiles li'),
                firstTen = items.slice(0, 10);
            $('#tiles').append(firstTen.clone());

            applyLayout();
          }
        };

        // Capture scroll event.
        $(window).bind('scroll', onScroll);

        // Call the layout function.
        handler = $('#tiles li');
        handler.wookmark(options);
      });
    })(jQuery);
  </script>

</body>
</html>