Added infinite scroll example

Additional example shows how to detect when the user has scrolled all
the way down to the page, and then extend the image grid with more
content.

example-endless-scroll/css/reset.css

@@ -0,0 +1,124 @@
+/* HTML5 ✰ Boilerplate
+ * ==|== normalize ==========================================================
+ */
+
+article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
+audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
+audio:not([controls]) { display: none; }
+[hidden] { display: none; }
+
+html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
+body { margin: 0; font-size: 13px; line-height: 1.231; }
+body, button, input, select, textarea { font-family: sans-serif; color: #222; }
+
+::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
+::selection { background: #fe57a1; color: #fff; text-shadow: none; }
+
+a { color: #00e; }
+a:visited { color: #551a8b; }
+a:hover { color: #06e; }
+a:focus { outline: thin dotted; }
+a:hover, a:active { outline: 0; }
+
+abbr[title] { border-bottom: 1px dotted; }
+b, strong { font-weight: bold; }
+blockquote { margin: 1em 40px; }
+dfn { font-style: italic; }
+hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
+ins { background: #ff9; color: #000; text-decoration: none; }
+mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
+pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
+pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
+q { quotes: none; }
+q:before, q:after { content: ""; content: none; }
+small { font-size: 85%; }
+sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
+sup { top: -0.5em; }
+sub { bottom: -0.25em; }
+ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
+dd { margin: 0 0 0 40px; }
+nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
+img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
+svg:not(:root) { overflow: hidden; }
+figure { margin: 0; }
+
+form { margin: 0; }
+fieldset { border: 0; margin: 0; padding: 0; }
+label { cursor: pointer; }
+legend { border: 0; *margin-left: -7px; padding: 0; }
+button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
+button, input { line-height: normal; *overflow: visible; }
+table button, table input { *overflow: auto; }
+button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
+input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
+input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
+input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
+button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
+textarea { overflow: auto; vertical-align: top; resize: vertical; }
+input:valid, textarea:valid {  }
+input:invalid, textarea:invalid { background-color: #f0dddd; }
+
+table { border-collapse: collapse; border-spacing: 0; }
+td { vertical-align: top; }
+
+
+/* ==|== primary styles =====================================================
+   Author: 
+   ========================================================================== */
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* ==|== non-semantic helper classes ======================================== */
+.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
+.ir br { display: none; }
+.hidden { display: none !important; visibility: hidden; }
+.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
+.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
+.invisible { visibility: hidden; }
+.clearfix:before, .clearfix:after { content: ""; display: table; }
+.clearfix:after { clear: both; }
+.clearfix { zoom: 1; }
+
+
+/* ==|== media queries ====================================================== */
+
+@media only screen and (min-width: 480px) {
+
+
+}
+
+@media only screen and (min-width: 768px) {
+
+}
+
+
+
+/* ==|== print styles ======================================================= */
+
+@media print {
+  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } 
+  a, a:visited { text-decoration: underline; }
+  a[href]:after { content: " (" attr(href) ")"; }
+  abbr[title]:after { content: " (" attr(title) ")"; }
+  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } 
+  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
+  thead { display: table-header-group; }
+  tr, img { page-break-inside: avoid; }
+  img { max-width: 100% !important; }
+  @page { margin: 0.5cm; }
+  p, h2, h3 { orphans: 3; widows: 3; }
+  h2, h3 { page-break-after: avoid; }
+}

example-endless-scroll/css/style.css

@@ -0,0 +1,76 @@
+
+/**
+ * Grid container
+ */
+#tiles {
+list-style-type: none;
+position: relative; /** Needed to ensure items are laid out relative to this container **/
+margin: 0;
+}
+
+/**
+ * Grid items
+ */
+#tiles li {
+width: 200px;
+background-color: #ffffff;
+border: 1px solid #dedede;
+-moz-border-radius: 2px;
+-webkit-border-radius: 2px;
+border-radius: 2px;
+display: none; /** Hide items initially to avoid a flicker effect **/
+  cursor: pointer;
+padding: 4px;
+}
+
+#tiles li img {
+display: block;
+}
+
+/**
+ * Grid item text
+ */
+#tiles li p {
+color: #666;
+font-size: 12px;
+margin: 7px 0 0 7px;
+}
+
+/**
+ * Some extra styles to randomize heights of grid items.
+ */
+#tiles ali:nth-child(3n) {
+height: 175px;
+}
+
+#tiles ali:nth-child(4n-3) {
+padding-bottom: 30px;
+}
+
+#tiles ali:nth-child(5n) {
+height: 250px;
+}
+
+/** General page styling **/
+
+html {
+background-color: #e9e9e9;
+}
+
+#main {
+padding: 30px 0 30px 0;
+}
+
+header h1 {
+text-align: center;
+font-size: 24px;
+font-weight: normal;
+margin: 30px 0 3px 0;
+}
+
+header p {
+text-align: center;
+font-size: 13px;
+color: #777;
+margin: 0;
+}

example-endless-scroll/index.html

@@ -0,0 +1,124 @@
+<!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">
+
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+
+  <!-- CSS Reset -->
+  <link rel="stylesheet" href="css/reset.css">
+
+  <!-- Styling for your grid blocks -->
+  <link rel="stylesheet" href="css/style.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="images/image_1.jpg" width="200" height="283"><p>1</p></li>
+        <li><img src="images/image_2.jpg" width="200" height="300"><p>2</p></li>
+        <li><img src="images/image_3.jpg" width="200" height="252"><p>3</p></li>
+        <li><img src="images/image_4.jpg" width="200" height="158"><p>4</p></li>
+        <li><img src="images/image_5.jpg" width="200" height="300"><p>5</p></li>
+        <li><img src="images/image_6.jpg" width="200" height="297"><p>6</p></li>
+        <li><img src="images/image_7.jpg" width="200" height="200"><p>7</p></li>
+        <li><img src="images/image_8.jpg" width="200" height="200"><p>8</p></li>
+        <li><img src="images/image_9.jpg" width="200" height="398"><p>9</p></li>
+        <li><img src="images/image_10.jpg" width="200" height="267"><p>10</p></li>
+        <li><img src="images/image_1.jpg" width="200" height="283"><p>11</p></li>
+        <li><img src="images/image_2.jpg" width="200" height="300"><p>12</p></li>
+        <li><img src="images/image_3.jpg" width="200" height="252"><p>13</p></li>
+        <li><img src="images/image_4.jpg" width="200" height="158"><p>14</p></li>
+        <li><img src="images/image_5.jpg" width="200" height="300"><p>15</p></li>
+        <li><img src="images/image_6.jpg" width="200" height="297"><p>16</p></li>
+        <li><img src="images/image_7.jpg" width="200" height="200"><p>17</p></li>
+        <li><img src="images/image_8.jpg" width="200" height="200"><p>18</p></li>
+        <li><img src="images/image_9.jpg" width="200" height="398"><p>19</p></li>
+        <li><img src="images/image_10.jpg" width="200" height="267"><p>20</p></li>
+        <li><img src="images/image_1.jpg" width="200" height="283"><p>21</p></li>
+        <li><img src="images/image_2.jpg" width="200" height="300"><p>22</p></li>
+        <li><img src="images/image_3.jpg" width="200" height="252"><p>23</p></li>
+        <li><img src="images/image_4.jpg" width="200" height="158"><p>24</p></li>
+        <li><img src="images/image_5.jpg" width="200" height="300"><p>25</p></li>
+        <li><img src="images/image_6.jpg" width="200" height="297"><p>26</p></li>
+        <li><img src="images/image_7.jpg" width="200" height="200"><p>27</p></li>
+        <li><img src="images/image_8.jpg" width="200" height="200"><p>28</p></li>
+        <li><img src="images/image_9.jpg" width="200" height="398"><p>29</p></li>
+        <li><img src="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="js/jquery-1.7.1.min.js"></script>
+
+  <!-- Include the plug-in -->
+  <script src="js/jquery.wookmark.js"></script>
+
+  <!-- Once the page is loaded, initalize the plug-in. -->
+  <script type="text/javascript">
+    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: 2, // Optional, the distance between grid items
+      itemWidth: 210 // Optional, the width of a grid item
+    };
+
+    /**
+     * 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 closeToBottom = ($(window).scrollTop() + $(window).height() > $(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');
+        var firstTen = items.slice(0, 10);
+        $('#tiles').append(firstTen.clone());
+
+        // Clear our previous layout handler.
+        if(handler) handler.wookmarkClear();
+
+        // Create a new layout handler.
+        handler = $('#tiles li');
+        handler.wookmark(options);
+      }
+    };
+
+    $(document).ready(new function() {
+      // Capture scroll event.
+      $(document).bind('scroll', onScroll);
+
+      // Call the layout function.
+      handler = $('#tiles li');
+      handler.wookmark(options);
+    });
+  </script>
+
+</body>
+</html>